Event bubbling and capturing

Model answer. When you click an element, the event travels in three phases:

1. Capturing: from window down through each ancestor to the target.
2. Target: at the element itself.
3. Bubbling: back up from the target through each ancestor to window.

Listeners run in the bubbling phase by default. Pass { capture: true } (or true) to run in the capturing phase instead.

outer.addEventListener('click', () => log('outer capture'), { capture: true });
inner.addEventListener('click', () => log('inner'));
outer.addEventListener('click', () => log('outer bubble'));
// clicking inner logs: outer capture, inner, outer bubble

• event.stopPropagation() stops the event moving to further elements.
• event.stopImmediatePropagation() also stops other listeners on the same element.

Avoid stopping propagation casually: analytics, dropdowns that close on outside clicks, and event delegation all rely on events bubbling. Not every event bubbles (focus, blur, mouseenter do not; focusin, focusout do).