Javascript Event Priority

Question

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 even always fire before one added with addEventListener?

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

Solution 1

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.

Solution 2

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}

Comments

[elclanrs]

Just don't mix and match, always attach events in JavaScript, problem solved.

[Magic Lasso]

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]

@elclanrs I definitely agree, unfortunately in this situation im kinda just duct taping over the existing stuff.

[Ibrahim Najjar]

@MagicLasso I don't fully understand your question. Is the plugin using AddEventListener() to attach listeners to the image being swapped ?

[Magic Lasso]

@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.

[gen_Eric]

That's not what he's asking. He's asking if you have <a onclick="alert('a')"></a> and then $('a').click(function(){ alert('b'); }), which alerts first?

[Kevin B]

Right, but there's still no priority. it's first in first out. The reason the inline happens first is because it's the first one that is bound.

[Ibrahim Najjar]

@RocketHazmat I didn't look at it from that point of view, I thought of it the way KevinB did.

[matewka]

Can you give a reference to this (documentation)? I never thought about this concept but always assumed that it depends on the order of their declaration in the document.

[Kevin B]

it's order in which the binding code is executed, not the order in the document. for example, inline events are bound when the browser parses the html, therefore they will always go first. though i'm not sure how changing the onclick attribute later affects things

[maček]

@matewka, I added an explanation to address your comment.

[Kevin B]

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.

[Ibrahim Najjar]

@KevinB I have quoted your comment in my answer if you don't mind, because I liked the way you put it.

[Magic Lasso]

Sorry added an explanation of why im asking to clarify. The answer still helps though.

[matewka]

Thanks you for your concern. Still, there's no proof. jQuery you provided is evaluated on document load, so it's obvious the "world" function will be fired after the "hello". When it comes to your explanation - it only explains that the event listener can't be binded to non existing element. I'll try to do the research to confirm your way of thinking.