Why this matters
The production reason.
A grid with hundreds of buttons does not need hundreds of event listeners when the behavior is shared.
Event delegation lets a parent listen once and inspect which child triggered the event.
This is useful for tables, menus, generated lists, and CMS-rendered content.
Copy-ready example
document.querySelector("[data-actions]").addEventListener("click", (event) => {
const button = event.target.closest("[data-action]");
if (!button) return;
runAction(button.dataset.action);
});