Event Capturing: Mermaid Sequence Diagram

About Source

Event capturing is the first phase of DOM event propagation, during which an event travels from the document root downward through each ancestor element to the target, giving outer elements the opportunity to intercept events before they reach the target.

The full DOM event propagation model has three phases: capture, target, and bubble. Capturing runs first, always. When an event is dispatched, the browser starts at window, then descends through each ancestor: document, , , and through the DOM tree to the event's target element. Listeners registered with addEventListener('click', handler, true) or addEventListener('click', handler, { capture: true }) participate in this downward phase. Standard listeners (without the capture flag) only run during the target and bubbling phases.

Event capturing is less commonly used than Event Bubbling, but it has specific use cases where it is the correct tool. If you need to intercept an event before it reaches a child element — for example, to prevent a modal's inner content from receiving scroll events that would otherwise propagate to an outer scroller — a capture-phase listener on the outer element fires before any bubble-phase listener on the child. It is also used in accessibility toolkits that need to monitor all events on a page without being blocked by stopPropagation calls in application code.

Calling event.stopPropagation() inside a capture-phase listener halts the event entirely — it neither reaches the target nor enters the bubble phase. This makes capture-phase listeners a powerful but sharp tool; misuse can silently swallow events that other parts of the application depend on.

The full sequence for a click on a

Event capturing is the first phase of DOM event propagation, during which the browser traverses from `window` down through each ancestor to the target element before the event fires on the target. Listeners registered with `{ capture: true }` run during this downward pass.

Capturing runs first (top-down, from `window` to target), bubbling runs second (bottom-up, from target to `window`). Standard `addEventListener` listeners without the capture flag run during the target and bubbling phases. Capture listeners fire before any bubble listener on a descendant, making them suitable for intercepting events before they reach child elements.

Use capturing when you need to intercept or cancel an event before it reaches its target — for example, preventing scroll events from reaching an inner container when a modal is open, or in accessibility toolkits that must observe all events without being silenced by `stopPropagation` calls in application code. For most everyday event handling, the default bubble phase is correct.

Event Capturing

Frequently asked questions