With the different ways of adding events in JavaScript, do any of them take priority like CSS classes do? For example will an inline onclick event always fire before one added with addEventListener?

If not, is there any way to give an event priority?

With the different ways of adding events in JavaScript, do any of them take priority like CSS classes do? For example will an inline onclick event always fire before one added with addEventListener?

If not, is there any way to give an event priority?

• javascript
• dom-events

• 2 Just don't mix and match, always attach events in JavaScript, problem solved. – elclanrs Commented Oct 31, 2013 at 21:05
• Ahh thanks for all the replies so far. I am asking because I am installing plugins on top of a CMS system. I dont want to modify the root files because they are a mess. In a certain case I need to reinitiate the plugin after an image swap. I want the function to swap the image, then reinitiate the plugin. I should have specified the problem and asked if it would swap first (an inline event) then reinitiate (the addEventListenerEvent)? – Magic Lasso Commented Oct 31, 2013 at 21:13
• @elclanrs I definitely agree, unfortunately in this situation im kinda just duct taping over the existing stuff. – Magic Lasso Commented Oct 31, 2013 at 21:14
• @MagicLasso I don't fully understand your question. Is the plugin using AddEventListener() to attach listeners to the image being swapped ? – Ibrahim Najjar Commented Oct 31, 2013 at 21:23
• 1 @Sniffer Im using addeventlistener to add the initialize event to the element. I need it to execute after the existing inline onclick event fires. Its actually working fine though this was mostly curiosity. – Magic Lasso Commented Oct 31, 2013 at 21:40

2 Answers 2

Yes

An inline onclick handler is going to bind as the DOM is loading

Whereas anything you add with .on or .addEventListener will have to wait for the DOM element to load first.

See here: http://jsfiddle.net/DmxNU/

Your html

<a href="#" onclick="console.log('hello');">click</a>

Your js (jQuery in this case)

$(function() {
    $("a").click(console.log.bind(console, "world"));
});

Output

hello
world

Explanation

I'm not sure where this would be documented, but think about it this way. If you're going to use the DOM API to query an element and then add an event listener, that element has to be loaded first. If that element already contains an onclick attribute, that will already be attached first.

JavaScript events don't take any priorities. When and event is fired it is added to an event queue and executed as soon as possible.

You can claim that it is a general rule that onclick attribut events will always trigger first, and that will always be true, but it's not because they are prioritized.

^{Quoted from @Kevin B's comment}