Comparison
Event bubblingvsEvent capturing
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 capturing
you passed `{ capture: true }` and your handler ran before the one on the element that was actually clicked.
The first phase of event dispatch, in which the event travels down from the document to the target before any bubble listener runs. It is opt-in and rarely used, but it is the only way to intercept an event before a descendant can stop it — which makes it the tool for global concerns like closing overlays or blocking input during a drag. Handlers registered in this phase run in tree order from the top, the reverse of bubbling.
Full entry →