Event delegation is a design pattern in JavaScript used to efficiently handle events on multiple child elements by adding a single event handler to a common ancestor element. When used correctly, this pattern can significantly improve performance.

Consider the following HTML structure:

The parent element is a div with the id of container, and it contains multiple button elements as its children. Traditionally, if we wanted to trigger a function when any button is clicked, we would attach a separate click event handler to each button.

Event delegation takes a different approach. Instead of attaching multiple event handlers, we attach a single event handler to the parent element (i.e., the container). Within the parent element's event handler function, we can identify the specific child element that triggered the event.

But how does this work?

It’s possible because of event bubbling. Most events in the DOM bubble up from the target element (where the event occurred) to the root DOM node. This allows the parent element to listen for events triggered by its child elements.

If you'd like to dive deeper into event bubbling and capturing, check out this detailed explanation.

/*
 * <div id="container">
 *   <button>Item 1</button>
 *   <button>Item 2</button>
 *   <button>Item 3</button>
 *   <button>Item 4</button>
 *   <button>Item 5</button>
 *   <button>Item 6</button>
 *   <button>Item 7</button>
 *   <button>Item 8</button>
 *   <button>Item 9</button>
 * </div>
 */

const container = document.querySelector("#container");

container.addEventListener("click", function (event) {
  console.log(event.target); // gives the element that triggered the event
  console.log(event.target.textContent); // Item 5
});

When Item 5 is clicked, the event from the button bubbles up, and we intercept it in the container's event handler. The event.target property provides a reference to the specific element that triggered the event.

Benefits of Event Delegation

1. Efficiency: No matter how many child elements we have — even thousands — we only use a single event handler. This approach conserves memory.
2. Dynamic Elements: When elements are added or removed dynamically, we don't need to manually add or remove event listeners for those elements.

Common Pitfalls

1. Be mindful of event types: Events such as blur, focus, and mouseenter do not bubble up, so event delegation cannot be used for handling them.
2. Ensure the correct target element: Always validate the target element to avoid triggering unintended actions.
3. Complex logic: While this approach is efficient, managing all events in a single handler can become complex if the logic isn’t well-structured.

React delegates all events to the root node by default. Even if you add multiple onClick handlers to child elements, React does not attach event listeners directly to those child DOM elements. Instead, it uses a Synthetic Event System, which normalizes event behavior across browsers and efficiently manages events through event delegation.

Summary

1. Event delegation is a JavaScript design pattern that optimizes event handling by attaching a single event listener to a common ancestor element instead of adding listeners to multiple child elements.
2. It relies on event bubbling, where events propagate from the target element to parent elements up to the root DOM node.
3. It reduces memory usage by using a single event handler regardless of the number of child elements and automatically handles dynamically added or removed child elements without requiring additional event listeners.
4. Certain events, such as blur, focus, and mouseenter, do not bubble up and cannot be delegated.
5. React uses event delegation by default, attaching all event listeners to the root node via its Synthetic Event System.

Resources

freeCodeCamp