UseCapture in addEventListener behaves strangely

Question

I am trying to understand the useCapture parameter in JavaScript addEventListener() . Here is my HTML:

 <div id="wrapper"> <button id="button">Click me</button> </div> 

Here is my javascript:

 document.getElementById('wrapper').addEventListener('click', function () { console.log('Wrapper capture'); }, true); document.getElementById('wrapper').addEventListener('click', function () { console.log('Wrapper bubble'); }, false); document.getElementById('button').addEventListener('click', function () { console.log('Button bubble'); }, false); document.getElementById('button').addEventListener('click', function () { console.log('Button capture'); }, true); 

Now I expected the order would be Wrapper capture, Button capture, Button bubble, Button bubble . Surprisingly, here is my result:

 Wrapper capture Button bubble Button capture Wrapper bubble 

Do two button handlers mix? I tested it in other browsers, but Chrome, Firefox and IE10 show the same behavior. I am a little puzzled by this. MDN , QuirksMode.org and the specification clearly describe the different phases and how the capture phase precedes the bubbling phase. Why does my little experiment cause the Button bubble handler to get called before my Button capture ?

Here is the scenario of what is happening: http://jsfiddle.net/Tr7G6/2

---

// Update It seems that the data binding order of the handlers.

 document.getElementById('wrapper').addEventListener('click', function () { console.log('Wrapper capture'); }, true); document.getElementById('wrapper').addEventListener('click', function () { console.log('Wrapper bubble'); }, false); document.getElementById('button').addEventListener('click', function () { console.log('Button capture'); }, true); document.getElementById('button').addEventListener('click', function () { console.log('Button bubble'); }, false); 

Binding to capture the first and second bubble makes the expected result, a cross browser. But this is stupid. Why does this order matter?

Answer 1

Bubbling / capture only is applicable only when the event bubbles / captures the target element, and not when the event is fired directly on this element (this is the “target phase” of the W3C event model). If there is no "bubble" or "capture" that occurs with the click event on your <button> - the events are processed in the order in which they are added.

For example, if you have to undo the order of listeners on your “wrapper” and click on a shell element (not a button), you will notice the same behavior (the first bubble would fire):

 // 1. "Wrapper Bubble" 2. "Wrapper Capture" document.getElementById('wrapper').addEventListener('click', function () { console.log('Wrapper bubble'); }, false); document.getElementById('wrapper').addEventListener('click', function () { console.log('Wrapper capture'); }, true); 

However, if you must use the same order (bubble before capture) and press button , then capture will burn in front of the bubble. This is due to the fact that the "click" event is fired on the button and is "captured down" through the dom to the "bubbling up" (normal event flow).

I created JSBIN , which I hope will help clarify this (however, this may just add to the confusion). The "ordered" button / div starts the order of your first fragment, and the "unordered" button and div use the order in you.

For more information, see this answer SO and W3C Event Flow Documentation , specifically Target Phase .