How the browser decides which handler runs first when one click hits three nested elements.
When something happens in the DOM — a click, a keypress, a scroll — the browser doesn't just fire a handler on the exact element it happened on. It runs a three-phase process: capturing (from the root down to the target), the target phase, and bubbling (back up from the target to the root). Handlers attached normally listen during the bubbling phase by default; passing { capture: true } listens during the capturing phase instead.
This is what makes event.stopPropagation() and event delegation possible. Delegation takes advantage of bubbling by attaching one listener to a parent element instead of many listeners to individual children, then using event.target to figure out which child was actually interacted with — a pattern that scales much better for dynamic lists than attaching and removing listeners on every item. event.preventDefault(), by contrast, doesn't stop propagation at all — it only cancels the browser's default action (like a link navigating), which is a distinction that trips people up constantly.
What you'll walk away knowing
No questions match "".