Learn how to handle events in dynamic lists through a single listener on the container using `event.target`, `closest()` and clear guard clauses.
Listen high, decide low.
Instead of attaching one listener to each child button, you attach one listener to the parent container.
Then you inspect the event path and use `closest()` to recover the actionable element before you decide what to do.
`closest()` protects you when the click lands on nested text or icons.
`event.target` might be a `span` inside a button. `closest('[data-action]')` climbs the tree until it finds the trigger you actually care about.
If no match exists, return early. That guard clause prevents accidental logic from running on unrelated clicks.
A single handler can govern edit, delete, favorite and more.
In tables and card lists, each control can expose `data-action` and `data-id`. The delegated handler reads those values and dispatches the correct function.
That turns the container into a small UI router and keeps the interaction model predictable.