One Listener for a Thousand Rows
Decide what you would build from the brief alone. Everything below it is available, but the exercise stops working if you open it first.
A table where every row has Edit, Duplicate and Delete buttons currently attaches three listeners per row. Rows are added and removed constantly. Rewrite it with delegation.
Adding the single listener and then calling event.stopPropagation() inside it so nothing else reacts to the click. It cleans up nicely and it breaks things that are not visible from this component: an outside-click handler that closes an open dropdown never fires, analytics that listens at the document sees nothing, and a future feature that needs to observe clicks has to be wired into this handler specifically. Stopping propagation is a global decision made from inside a local component, and its damage shows up in a different file weeks later.