JavaScript Interview Question #64

What is event capturing?

DOM, Events & Event Loop Fundamentals Mid-Level Intermediate

Quick Interview Answer

Capturing is the propagation phase that travels from the outer document hierarchy toward the event target before the target and bubbling phases. A listener can participate in capturing by passing { capture: true } or true to addEventListener.

Detailed Explanation

Capturing is the propagation phase that travels from the outer document hierarchy toward the event target before the target and bubbling phases. A listener can participate in capturing by passing { capture: true } or true to addEventListener.

Most application event handling uses bubbling, but understanding capturing is important when diagnosing propagation order or intentionally intercepting events earlier in the propagation path.

Code Example

const parent = document.querySelector("#parent");

parent.addEventListener(
    "click",
    () => console.log("Capturing on parent"),
    { capture: true }
);