- Capturing Phase
- Target Phase
- Bubbling Phase
They follow the same order as listed above.
Capturing Phase is when event goes down to the element. Target phase is when event reach the element and Bubbling phase is when the event bubbles up from the element.
So among the three phases of an event, which phase uses the addEventListener() and how the programmer can change it?
The addEventListener() method will be called during the Bubbling phase. The code shown above will use addEventListener() with two arguments. However, in the above code, .addEventListener() can be called with the third argument as “true” which will invoke the listener earlier during the capturing phase.
In the above code, the body and button are in the bubbling phase (default) while div is set to capturing phase. When a button is clicked it starts at the top again. When it comes to the body element, it does not run function because we are still in the capturing phase. But when it reaches div it runs the function because the third parameter of addEventListener() is “true”. So it has to run in the capturing phase. When it reaches the button it switches from the capturing phase to the target phase and lastly to the bubbling phase. It fires the addEventListener which is in default mode.
So the above code will give alert msg box showing “div”, then “button” and lastly “body”.