Event Propagation in JavaScript
A Thread 🧵
Event propagation is a process that determines how events travel up and down through the DOM tree to reach their target element.
Event propagation proceeds in three phases:
1. The Capturing Phase
→ The event generates at the root of document and travels all the way down to the target element which is in this case the button element.
2. The Target Phase
→ This phase occurs when the event reaches the target element that generated that event which is in this case the button element as well.
3. The Bubbling Phase
→ During this phase, The event would travel from the target element all the way up to the root of document.
Here's a visual representation of the three phases:
You can read the unrolled version of this thread here: typefully.com/alicalimli_dev/rO7OeVX