- An element intercepts an event
- Browser collects DOM node path of the event from the starting element to the root
- Capture: the event propagates down the path from step 2
- Bubble: the event propagates up the path from step 2
By default, event listeners do not trigger until the bubbling phase
Triggering events at the capture phase can be done by adding true
as a third argument to addEventListener
.
x.addEventListener("click", foo, true)
You can cancel event propagation with e.stopPropagation()