Comparison
Event bubblingvsEvent delegation
Event bubbling
you clicked the button and the click handler on its container ran too, without you binding anything there.
The second phase of event dispatch, in which the event travels from the target back up through every ancestor to the document, firing listeners at each. It is the default phase for `addEventListener`, and it is what makes a single handler on a container able to serve every descendant. It is also why a click inside a modal can close the dropdown behind it, unless something stops the propagation.
Full entry →Event delegation
you put one click handler on the list and read `event.target` to work out which row was clicked.
Attaching a single listener to a common ancestor and using bubbling to serve every descendant, instead of one listener per element. It keeps memory flat as a list grows and works for elements added after the listener was attached, which is why frameworks do it internally. The cost is that you have to check the target yourself, and `event.target` is the deepest node hit, so it usually needs a `closest()` call rather than a direct comparison.
Full entry →