All 10 DOM & Events questions
More in DOM & Events
What is event bubbling? What does event.preventDefault() do? How do you select and modify an element's text content? What's the difference between event.target and event.currentTarget? How do you create and dispatch a custom DOM event? What's the difference between the capturing and bubbling phases of event propagation? How do you properly clean up event listeners to avoid memory leaks? What is the difference between passive and non-passive event listeners for scroll performance? How does MutationObserver let you react to DOM changes made by other code?
Advertisement
JavaScript › DOM & Events

What is event delegation and why is it a performance best practice?

Intermediate

Answer

Event delegation attaches a single listener to a common ancestor and uses event.target to determine which child triggered it, instead of attaching a separate listener to every child — this uses far less memory and automatically works for dynamically added children.
document.getElementById('list').addEventListener('click', (e) => {
  if (e.target.matches('li')) {
    console.log('Clicked item:', e.target.textContent);
  }
});
Real-world example Handling clicks on rows of a dynamically loaded, potentially thousands-of-items-long table.

Common follow-ups: What DOM property tells you which element actually triggered the event versus which listener caught it?

Performance Optimization: Debouncing Throttling & Memoization
All 10 DOM & Events questions