What is event delegation and why is it useful?

Question

What is event delegation and why is it useful?

Answer

Event delegation is a pattern where instead of attaching event listeners to multiple child elements, you attach one listener to a common ancestor and detect which child triggered the event.

const list = document.querySelector('.todo-list');

list.addEventListener('click', (e) => {
  if (e.target.matches('button.delete')) {
    console.log('Delete clicked for item:', e.target.dataset.id);
  }
});

Why it’s useful:

• ✅ Better performance (1 listener instead of 100)
• ✅ Works for dynamically added elements
• ✅ Cleaner code

Real-World Example

Used in todo apps, tables, or dropdowns where items are created dynamically (like in React portals or server-rendered lists).

Quick Practice

Create a <ul> where clicking on any <li> logs its text — but use only one event listener on the <ul>.

Summary

Event delegation = listen high, handle low. It’s one of the most useful DOM patterns for dynamic UIs.