Q91: What is event capturing - JavaScript Internals (521 Qs)

Event capturing is a phase of event propagation in which an event is first intercepted by the outermost ancestor element, then travels downward through the DOM hierarchy until it reaches the target (innermost) element.

To handle events during the capturing phase, you need to pass true as the third argument to the addEventListener method.

javascript

  <div>
    <button class="child">Hello</button>
  </div>

  <script>
    const parent = document.querySelector("div");
    const child = document.querySelector(".child");

    // Capturing phase: parent listener (runs first)
    parent.addEventListener("click", function () {
      console.log("Parent (capturing)");
    }, true); // `true` enables capturing

    // Bubbling phase: child listener (runs after)
    child.addEventListener("click", function () {
      console.log("Child (bubbling)");
    });
  </script>
  // Parent (capturing)
  // Child (bubbling)