Event Propagation in JavaScript and Its Phases

Event propagation in JavaScript is a process where an event travels through the hierarchy of DOM elements, starting from the outermost element and ending at the element where the event was triggered. This allows you to handle an event at different DOM levels.

Event Propagation Phases

1. Capturing Phase — event first passes through all parent elements from the top (root) to the target element.
2. Target Phase — event reaches the target element where it was initiated.
3. Bubbling Phase — event starts "bubbling" back from the target element to the top elements in DOM.

Example using event propagation phases:

<div id="parent">
  <button id="child">Click me!</button>
</div>

How it Works:

• Capturing Phase: When user clicks button, event first hits parent element where first handler triggers.
• Target Phase: Event reaches child element (event target) where second handler triggers.
• Bubbling Phase: Event then starts bubbling back, and third handler triggers on parent element.

How to Control Phases

• Event listeners can be configured to work either in capturing or bubbling phase, depending on which phase you want to intercept the event.
• It's important to remember that an event doesn't always have to bubble or capture. For example, you can use event.stopPropagation() to stop further event propagation, whether in capturing or bubbling phase.