Listening to multiple listeners

Question

I ran into weirdness when using Prototype to handle click events. If you press the button in the code below, it will trigger three warnings: “Press 1”, “Press 2” and “Press 3”. Modern browsers will call listeners in the order in which they are registered, while IE8 (and possibly older versions of IE) will refer to them in the reverse order. I find this strange because I thought that Prototype supports and runs a listener queue that should be browser independent. Is that not so? If not, should event listeners be triggered in a specific order, or are they asynchronous and therefore their order does not matter?

<button id="button">Click me</button> <script type="text/javascript"> $('button').observe('click', function(event) { alert('Click 1'); }); $('button').observe('click', function(event) { alert('Click 2'); }); $('button').observe('click', function(event) { alert('Click 3'); }); </script> 

Answer 1

The prototype is based on the browser underlying the launch mechanism for ordering (not all libraries, see below). The order in which event handlers are started was not guaranteed by the original DOM events. From the DOM2 event specification :

Although all EventListeners in an EventTarget guaranteed to be triggered by any event that this EventTarget , the specification is not specified with respect to the order in which they will receive the event with respect to other EventListeners on an EventTarget .

The vast majority of browser versions (Chrome, Firefox, Opera, etc.), including IE9, run handlers in the order in which they were attached. IE8 has done the opposite before.

The newer DOM3 event specification , still in progress, introduces a requirement for them to be fired in registration order (which most browsers do):

Next, the implementation should determine the current event listeners of the target candidate. This should be a list of all event listeners registered in the current target in the order in which they are registered.

... which is probably part of why IE9 is doing it now (IE9 has noticeably improved Microsoft support for event standards by adding addEventListener , etc.).

Some JavaScript libraries (such as jQuery) guarantee ordering independent of the browser, adding only one handler for each event for each element and maintaining their own list of custom code handlers.

Answer 2

Like a @TJ formatted comment by Crowder's answer, I tested which modern browsers actually launch listeners in registration order.

2016-10-06: the results are as follows: chrome 53, firefox 49, safari 9, opera 40, i.e. 11 and edge 13 through the virtual box on the Mac host.

My test code can be found here: https://github.com/lingtalfi/browsers-behaviours/blob/master/listeners-execution-order/listeners.md

Answer 3

According to this error report , it seems to be an existing error, and that it actually depends on the browser.

To summarize the report:

It depends on the browser, but some users (like a poster) expect events to fire in order. The error record was changed at some point as a change in the documentation (to inform users that the order was not actually specified), but the error is still open, so I assume that it has not yet been fixed in the documentation.