What React does

You write <button onClick={fn}>. React doesn't call button.addEventListener("click", fn). Instead:

1. At app mount, React attaches one listener per event type to the root container (since v17; was document in v16).
2. When an event fires, the listener catches it, constructs a synthetic event, walks the React fiber tree from the target to the root, and invokes matching handlers (bubble phase by default, capture for onClickCapture).
3. event.stopPropagation() on the synthetic event halts further React handlers in the chain. Native listeners on actual DOM nodes are unaffected.

Why delegate

• Memory + setup — one listener vs one per element.
• Dynamic children — added/removed without re-binding.
• Consistent event handling across browsers (synthetic event normalization).

React 16 vs 17+

• React 16: listeners on document. Multiple React apps on the same page could conflict; native code higher up couldn't reliably stopPropagation.
• React 17+: listeners on the root container. Lets multiple React versions coexist; allows native code in ancestors to intercept.

This was a significant change for incremental migration (microfrontends, gradual React adoption).

Synthetic events

Wraps native events with a normalized API:

function onClick(e: React.MouseEvent) {
  e.preventDefault();
  e.stopPropagation();
  // e.nativeEvent for the raw DOM event
}

Pre-17, synthetic events were pooled for perf (e reused). Post-17 pooling was removed — you can hold onto events across async.

Capture phase

<div onClickCapture={fn}>...</div>

Runs during capture phase (parent → target), before bubble handlers fire.

stopPropagation gotcha

function Modal() {
  return (
    <div onClick={() => close()}>           {/* backdrop closes */}
      <div onClick={(e) => e.stopPropagation()}>   {/* clicking inside doesn't close */}
        ...
      </div>
    </div>
  );
}

Works for React listeners. But if a non-React library attached a click listener on document or window, e.stopPropagation() on the synthetic event doesn't stop the native event from bubbling up — they're separate.

To stop both: e.nativeEvent.stopImmediatePropagation().

Touch / pointer / focus

• Many events still attached at root.
• Some events (focus/blur) don't bubble natively; React provides onFocus/onBlur that bubble via the synthetic system.

Performance implications

• Adding 10k onClick props in JSX has no per-row listener cost; it's just data in fiber.
• For very specific cases (drag tracking on a huge canvas), going direct via ref.addEventListener can be faster.
• Outside React UI libraries that listen on document need explicit interop.

Interview framing

"Since React 17, React attaches a single listener per event type on the root container. onClick doesn't bind a DOM listener — it's a prop React reads when it walks the fiber tree from event target to root, invoking handlers in bubble (or capture for onClickCapture). The root-level delegation means there's effectively zero listener cost per row, even on huge lists. The non-obvious bit: e.stopPropagation() on a synthetic event only stops other React handlers — native listeners outside React still fire. Use e.nativeEvent.stopImmediatePropagation() if you need to stop both. The v16 → v17 change from document to root listeners was specifically to support multiple React versions and incremental migration."