Explain event delegation and why it is useful.

Attach ONE listener to a parent instead of many listeners on children. Works because events bubble up the DOM.

// ❌ Inefficient
document.querySelectorAll('li').forEach(li =>
  li.addEventListener('click', handleClick)
);

// ✅ Event delegation
document.querySelector('ul').addEventListener('click', (e) => {
  if (e.target.matches('li')) handleClick(e.target);
});

Benefits: fewer listeners = less memory, works for dynamically added elements, cleaner teardown.