Event delegation for scalable interactive component lists

A toast stack, tag editor, data table, or result list may add and remove many repeated controls. One click listener on the owning root can handle those actions through event bubbling, reducing setup and eliminating per-item teardown when rows change.

Delegation is not a reason to listen on document for everything. Use the closest stable boundary that owns the behavior so unrelated clicks do not enter the handler and components remain independent when several copies exist.

                      root.addEventListener('click', (event) => {
  const action = event.target instanceof Element ? event.target.closest('[data-action]') : null;
  if (!action || !root.contains(action)) return;
  runAction(action.dataset.action);
});
                    

The event target may be an icon, span, or nested element inside the button. Use closest to find the intended action element, verify it remains inside the component root, and read a constrained data attribute rather than evaluating strings or constructing function names.

Let native buttons and links carry semantics. Delegation changes where JavaScript listens; it does not justify making an entire row a generic clickable div or swallowing the normal behavior of nested links.

Focus and blur do not bubble in the same way as focusin and focusout. Mouseenter does not bubble, while pointerover does. Choose the event based on the interaction and account for movement between descendants so hover-like handlers do not fire excessively.

Keyboard activation still arrives through the native control click in most cases. Composite widgets that interpret arrow keys may delegate keydown from their root, but the handler must preserve browser scrolling and text input where those keys have another purpose.

• Do not preventDefault unless the component replaces that exact behavior.
• Use AbortController for clean listener teardown when useful.
• Test controls added after initial render.

Modern browsers can handle many listeners, and a delegated handler that performs expensive DOM searches on every pointer movement can be worse. Delegate when it simplifies dynamic ownership or meaningfully reduces repeated setup, not as an automatic micro-optimization.

Profile the actual collection size, interaction frequency, and update pattern. The best implementation is the one whose ownership remains clear and whose slowest interaction stays responsive under production data.