What is event capturing?

Capturing is the first of the three phases the browser goes through when dispatching an event. It runs top-down: starting at window, the event descends through every ancestor until it reaches the target. Only afterwards does the target phase run, followed by bubbling back up.

Listeners are registered in the bubble phase by default. To hook into capture you opt in explicitly:

// third argument `true`, or the { capture: true } option
parent.addEventListener("click", handler, true);
parent.addEventListener("click", handler, { capture: true });

outer.addEventListener("click", () => console.log("outer capture"), true);
inner.addEventListener("click", () => console.log("inner target"));
outer.addEventListener("click", () => console.log("outer bubble"));

// Clicking inner logs: "outer capture", "inner target", "outer bubble"

When capturing is the right tool

Most code never needs it — delegation works fine on the bubble phase. Capture earns its place when you must see the event before anything downstream can cancel it:

• A global handler that logs or blocks interactions while a modal is open, even if a child calls stopPropagation().
• Intercepting events on elements whose own handlers you do not control, such as third-party widgets.
• Delegating events that do not bubble at all — capture still reaches them.

Note that removeEventListener must be given the same capture value used at registration, otherwise the listener is not removed.