Event propagation

Browser events usually travel through capture, target, and bubble phases. Listeners can observe different phases, stop propagation, prevent default behavior when cancelable, and use passive mode to promise they will not block scrolling. Shadow DOM can change the visible path through composed events.

					element.addEventListener('click', handler, { capture: true });
// capture → target → bubble; use event.eventPhase to debug order
				

`stopPropagation` limits who else hears the event; `preventDefault` cancels the default action only when `event.cancelable` is true. Passive listeners ignore preventDefault for scroll performance.

On interviews: explain the exact order of handlers and the difference between stopping propagation and canceling default behavior.

Common pitfalls: calling preventDefault on non-cancelable or passive events does nothing. Overusing stopPropagation breaks composition.

The trade-off is convenience versus control — pick the mechanism that matches your coupling and performance budget.

Checklist:

• Know capture, target, and bubble order.
• Check cancelable before preventDefault.
• Use passive for scroll/touch when not canceling.
• Handle composed paths in shadow DOM.