Menu
addEventListener listens for both capture phase and bubbling phase events. The third parameter (called useCapture in the specification) allows the programmer to specify which phase they want to use.
addEventListener("click", first, true); when clicking child element, first method will be called before second . By default, the useCapture flag is set to false which means you handler will only be called during event bubbling phase.
With the addEventListener() method you can specify the propagation type by using the "useCapture" parameter: addEventListener(event, function, useCapture); The default value is false, which will use the bubbling propagation, when the value is set to true, the event uses the capturing propagation.
Definition and Usage. The addEventListener() method attaches an event handler to a document.
This is for historical reasons. When the browser event system was first designed, there were two conflicting ways of modelling how it worked. They were called event capture and event bubbling.
Take for instance, this HTML:
<html>
<body>
<a href="#">Content</a>
</body>
</html>
If an event (e.g. a click) happens on the a element, should the ancestor elements know? It was widely accepted that they should. But the question was in what order they should be notified. The Microsoft and Netscape developers (this should give you an idea of quite how historical we're talking!) had differing opinions.
One model was event capture (advocated by the Netscape developers). This notified the html element first and worked its way down the tree:
htmlbodyaThe other model was event bubbling (advocated by the Microsoft developers). This notified the target element first, and worked its way up the tree:
abodyhtmlThe eventual compromise was that it should do both.
html (capture phase)body (capture phase)a (capture phase)a (bubbling phase)body (bubbing phase)html (bubbling phase)So the event works its way down the tree and then back up again.
This is a long-winded way of getting to addEventListener. addEventListener listens for both capture phase and bubbling phase events. The third parameter (called useCapture in the specification) allows the programmer to specify which phase they want to use.
In modern browsers, this defaults to false. You will probably never come across a circumstance where you want to use the capturing phase, especially as Internet Explorer still doesn't support it. But old browsers need the false to be explicit, so it is generally provided for backwards-compatibility.
It's useCapture:
If
true,useCaptureindicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registeredlistenerbefore being dispatched to anyEventTargets beneath it in the DOM tree. Events which are bubbling upward through the tree will not trigger a listener designated to use capture. See DOM Level 3 Events for a detailed explanation.
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