Event bubbling, capturing, and delegation — what's the difference?

DOM events traverse the tree in three phases: capture (window → parent → ... → target's parent), target (the element you clicked), then bubble (target → parent → ... → window). Most listeners run in the bubble phase. addEventListener(type, handler, true) (or { capture: true }) attaches in the capture phase instead.

Why bubbling matters. A click on <button> inside <li> inside <ul> fires the handler on the button, then the li, then the ul, then up to body and window. Any ancestor can listen and react.

Stop the flow.

• event.stopPropagation() — prevents further parents from receiving the event. Use sparingly; it breaks listeners that other code may have legitimately attached upstream (analytics, outside-click detection).
• event.stopImmediatePropagation() — also stops other handlers on the same element that were registered after this one.
• event.preventDefault() — different concept: cancels the default browser action (form submit, link navigation), but the event still bubbles.

Event delegation is the practical payoff: instead of attaching one handler per child (<li onClick> × 1000), attach one handler on the parent and read event.target to find which child was clicked. Benefits:

1. Memory. One listener vs N listeners — significant for large lists.
2. Dynamic content. New children added later automatically work — no need to re-attach listeners.
3. Composition. Centralizes the routing logic.

list.addEventListener("click", (e) => {
  const li = (e.target as HTMLElement).closest("li[data-id]");
  if (!li) return;
  const id = li.dataset.id;
  handleSelect(id!);
});

closest() is the right tool — event.target may be an inner <span> or icon, not the <li> you actually care about.

React's twist. React uses one delegated root listener (since v17, attached to the root container, not document). Synthetic events bubble through the React tree (which can differ from the DOM tree, e.g., portals). e.stopPropagation() in a React handler stops React-tree propagation but does NOT stop the underlying DOM event by default — it does as of React 17+ on the root listener but legacy code may differ. Portals: events still bubble through the React parent, not the DOM parent — useful for modals.

Capture-phase use cases. Rare but real: when you must run before a child's bubble handler can call stopPropagation. Example: a global "outside click closes menu" listener that needs to fire even if the inner content stops propagation.

{ once: true, passive: true } options.

• once: auto-removes the listener after the first fire — perfect for one-shot signals.
• passive: tells the browser the handler will NOT call preventDefault, so scroll/touch can be smooth without waiting for JS. Use on scroll and touchmove for perf — but you can't preventDefault inside.

Common bugs from misunderstanding.

• Calling stopPropagation in a modal close button → outside-click handler also runs because click on the backdrop still bubbles up to document. Solution: check e.target === e.currentTarget on the backdrop.
• Adding handler to a parent that doesn't yet exist (script loaded too early) → use delegation on a stable ancestor like document.body.
• Expecting mouseenter to bubble → it doesn't (use mouseover if you need bubbling, but it fires on every descendant).