All 10 DOM & Events questions
More in DOM & Events
How do you select and modify an element's text content? What is event delegation and why is it a performance best practice? What's the difference between event.target and event.currentTarget? How do you create and dispatch a custom DOM event? How do you properly clean up event listeners to avoid memory leaks? What is the difference between passive and non-passive event listeners for scroll performance? How does MutationObserver let you react to DOM changes made by other code?
Advertisement
Back to results for “Design Patterns in JavaScript”
JavaScript › DOM & Events

What's the difference between the capturing and bubbling phases of event propagation?

Advanced

Answer

Events actually travel in three phases: capturing (top-down, from window to the target), target phase, then bubbling (bottom-up, target back to window). Listeners default to the bubbling phase; pass { capture: true } to react during the capturing phase instead.
el.addEventListener('click', handler, { capture: true }); // fires during capture (top-down)
el.addEventListener('click', handler); // fires during bubble (bottom-up), the default
Real-world example Intercepting a click at a top-level container BEFORE it reaches a deeply nested element that might call stopPropagation().

Common follow-ups: Can you stop propagation during the capturing phase to prevent a click reaching its target at all?

Design Patterns in JavaScript
All 10 DOM & Events questions