Loading
Instead of giving every button its own listener, you put one listener on the parent and let events bubble up — like a receptionist who routes calls for the whole office.
A pattern where a single event listener on a parent element handles events for multiple children by checking event.target. This reduces memory usage and automatically handles dynamically added elements.
Event delegation exploits the DOM bubble phase, attaching a handler at a common ancestor and using event.target (or closest()) to identify the originating element. This yields O(1) listener registration regardless of child count and avoids listener lifecycle management when child nodes are added or removed. Composed events crossing shadow DOM boundaries require special handling.