Explain event delegation and when you would use it instead of attaching listeners to each element.

Event delegation means attaching one listener to a shared ancestor and using event.target to work out which descendant was interacted with. It works because most events bubble up from the target through its ancestors. Use it for lists that change often or are large, since you avoid attaching and cleaning up hundreds of listeners. Skip it for events that do not bubble, such as focus, blur and most media events.

Instead of putting a click listener on every row, I put one on the container and read event.target, then walk up with closest to find the row I care about. It works because the click bubbles from whatever was actually clicked up through its ancestors, so the container sees everything underneath it. The two wins are that I am not creating and tearing down hundreds of listeners, and rows added later just work with no rebinding. The catches are worth stating: focus and blur do not bubble, so I use focusin and focusout for those, and if any code between the target and my container calls stopPropagation my handler silently stops firing, which is a genuinely annoying bug to track down. I mostly hit this in a table where an inner component stopped propagation to close its own menu and quietly killed row selection. These days I usually get delegation for free from the framework, but I still use it directly for large virtualized lists and anything rendered outside the framework tree.