What is event delegation?

What is event delegation and why is it more efficient than attaching listeners to individual elements?

Event delegation takes advantage of event bubbling. Instead of attaching an event listener to every child element, you attach one listener to a common parent. When an event fires on a child, it bubbles up and the parent handler checks event.target to determine which child was clicked. Benefits: fewer listeners in memory, works for dynamically added elements, easier cleanup. Example: ```js // Bad — one listener per button buttons.forEach(btn => btn.addEventListener('click', handle)); // Good — one listener on the parent list.addEventListener('click', e => { if (e.target.matches('button')) handle(e.target); }); ```