Event Listeners Registered For Capturing Phase Not Triggered Before Bubbling - Why?

I'm trying to understand what determines the order in which event handlers are triggered when clicking a nested

- what I am seeing seems to be at odds with documented b

Solution 1:

W3C event flow spec (i.e., what Chrome and Firefox implement) is that all events are first captured until they reach the target element, at which point they bubble up again. However, when the event flow reaches the event target itself, the event is no longer capturing or bubbling--it's on the target itself. Because bubbling/capturing is not applicable, the event handlers fire in the order in which they are registered. Try swapping the order of your inner element event handlers, you'll find that it also changes the order of the console output.

jsFiddle example: http://jsfiddle.net/RTfwd/1/

More recent revisions of the DOM Event spec make this point more clear (http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html):

bubbling phase The process by which an event can be handled by one of the target's ancestors after being handled by the event target. See the description of the bubble phase in the context of event flow for more details.

capture phase The process by which an event can be handled by one of the target's ancestors before being handled by the event target. See the description of the capture phase in the context of event flow for more details.

Share