javascript - useCapture in addEventListener behaves strangely -

i'm trying make sense of usecapture parameter in javascript's addeventlistener(). here's html:

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

here's 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, expected order wrapper capture, button capture, button bubble, button bubble. surprisingly, here's output:

wrapper capture button bubble button capture wrapper bubble 

the 2 button handlers getting mixed up? tested in other browsers, chrome, firefox , ie10 display same behavior. i'm bit baffled this. the mdn, quirksmode.org , the spec describe different phases , how capture phase precedes bubbling phase. how come little experiment results in button bubble handler getting called before button capture?

here's fiddle of what's going on: http://jsfiddle.net/tr7g6/2

---

// update seems order of attaching handlers matter.

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 capture first , bubble second produce output expected, cross-browser. silly. why order matter?

bubbling/capturing relevant when event bubbles/captures target element, not when event triggered directly on element (this "target phase" of w3c events model). in case there no "bubble" or "capture" — case click event on <button> — events processed in order added.

for example, if reverse order of listeners on "wrapper" , click on wrapper element (not button) notice same behavior (bubble fire first):

// 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 use same order (bubble before capture) , click on button capture fire before bubble. because "click" event being triggered on button , "captured down" through dom before "bubbling up" (the normal event flow).

i've created jsbin clarify (however, may add confusion). "ordered" button / div triggers order of 1st snippet, , "unordered" button , div use order in 2nd.

for additional info see this answer , w3c event flow documentation, target phase.