Menu
I'm trying to understand what determines the order in which event handlers are triggered when clicking a nested <div> - what I am seeing seems to be at odds with documented behaviour so I'm looking for a little help to understand it.
I have 2 nested divs, and I have 2 event handlers attached to each, one for the capturing phase, and one for the bubbling phase:
<html>
<head>
<script>
function setup(){
var outer = document.getElementById('outer');
outer.addEventListener('click', function(){console.log('outer false');}, false);
outer.addEventListener('click', function(){console.log('outer true');}, true);
var inner = document.getElementById('inner');
inner.addEventListener('click', function(){console.log('inner false');}, false);
inner.addEventListener('click', function(){console.log('inner true');}, true);
}
</script>
<style>
div {
border: 1px solid;
padding: 1em;
}
</style>
</head>
<body onload="setup()">
<div id="outer">
<div id="inner">
CLICK
</div>
</div>
</body>
</html>
According to what I have read the output should be:
outer true
inner true
inner false
outer false
but what I actually see (on Chrome and Firefox) is:
outer true
inner false
inner true
outer false
Can anyone explain the discrepancy?
495
Capturing has a higher priority than bubbling, meaning that capturing event handlers are executed before bubbling event handlers, as shown by the phases of event propagation: Capturing phase : the event moves down towards the element. Target phase: the event reaches the target element.
Event bubbling is a method of event propagation in the HTML DOM API when an event is in an element inside another element, and both elements have registered a handle to that event. It is a process that starts with the element that triggered the event and then bubbles up to the containing elements in the hierarchy.
In order to stop the bubbling and also prevent the handlers from running on the current element, we can use event. stopImmediatePropagation () method. It is another method that stops the bubbling and execution of all the other handlers.
Definition and UsageThe event. stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed. Tip: Use the event. isPropagationStopped() method to check whether this method was called for the event.
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.
200
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
