Looking at the code for the cross browser event listener you will notice that there is a fourth parameter which I called uC, the use of which isn't obvious from the prior description.
Browsers have two different orders in which they can process events when the event is triggered. They can work from the outside inwards from the <body> tag in towards the tag that triggered the event or they can work from the inside out starting at the most specific tag. These two are called capture and bubble respectively and most browsers allow you to choose which order multiple processing should be run in by setting this extra parameter.
- uC = true to process during the capture phase
- uC = false to process during the bubble phase.
So where there are several other tags wrapped around the one that the event was triggered on the capture phase runs first starting with the outermost tag and moving in toward the one that triggered the event and then once the tag the event was attached to has been processed the bubble phase reverses the process and goes back out again.
Internet Explorer and traditional event handlers always process the bubble phase and never the capture phase and so always start at the most specific tag and work outwards.
So with a event handlers:
<div onclick="alert('a')><div onclick="alert('b')">xx</div></div>
clicking on the xx would bubble out triggering the alert('b') first and the alert('a') second.
If those alerts were attached using event listeners with uC true then all modern browsers except Internet Explorer would process the alert('a') first and then the alert('b').