capture parameter of the
addEventListener method. However, it is important to note that the
capture parameter only affects the order of execution during the capture phase and not during the bubbling phase.
The event flow in the DOM is divided into three phases: capturing phase, target phase, and bubbling phase.
Capturing Phase: Events are triggered from the top of the DOM tree and propagate down to the target element.
Target Phase: The event is triggered on the target element.
Bubbling Phase: Events are triggered from the target element and propagate up to the top of the DOM tree.
addEventListener method can be used with the
capture parameter to specify whether the event listener should be triggered during the capturing phase (
capture set to
true) or during the bubbling phase (
capture set to
false or omitted, which is the default).
Here's an example to illustrate the difference:
<html> <head> <title>Event Listener Order</title> </head> <body> <div id="outer"> <div id="inner">Click me</div> </div> <script> const outerDiv = document.getElementById('outer'); const innerDiv = document.getElementById('inner'); const captureListener = () => console.log('Capture phase'); const bubbleListener = () => console.log('Bubbling phase'); outerDiv.addEventListener('click', bubbleListener, false); // Bubbling phase innerDiv.addEventListener('click', captureListener, true); // Capturing phase innerDiv.addEventListener('click', bubbleListener, false); // Bubbling phase </script> </body> </html>
In this example, when you click on the "Click me" text, the order of execution will be as follows:
captureListener- This listener is set to execute during the capturing phase, so it will be triggered first.
bubbleListener- This listener is set to execute during the bubbling phase, so it will be triggered second.
bubbleListener- Another instance of the
bubbleListeneris also set to execute during the bubbling phase, so it will be triggered last.
In this case, the
capture parameter affects the order of execution between
captureListener and the
bubbleListener that is set to execute during the bubbling phase.
If you want to ensure a specific order of execution for event listeners regardless of the event phase, you should consider registering a single event listener and then manually handle the event logic inside that listener or use the
dispatchEvent method to create a custom event and control the order of execution manually.