React: How does event delegation work?

Event delegation is a technique where one event handler is attached to a parent element instead of attaching to each child element.

Simple analogy: Imagine you are an office manager. Instead of going to each employee and personally asking "Are you working today?" (attach handler to each element), you announce over the PA system: "Who is working today? Raise your hand!" and look at everyone at once (one handler on the parent).

How React did it (before version 17): React attached ONE handler to the root document. When you clicked any button:

1. The event bubbles up to document.
2. React checks: "Who was the real click target? Ah, this button. Does it have an onClick handler? Yes. Call it."
3. React finds the path from the target to document in the Fiber tree and calls all handlers along the way.

Advantages:

• Memory saving — one handler instead of hundreds.
• Dynamic elements — if you added a button after page load, its click will also be handled.
• Simplification — no need to track adding/removing handlers.

With React 17+: Delegation happens at the root node (where the app is rendered), not on document. This improves compatibility:

• Nested React applications do not interfere with each other.
• Other libraries (jQuery, Angular) can work peacefully on the same page.

Important: Events that do NOT bubble (focus, blur), React does not delegate — it attaches them directly to elements.