Three phases
When you click a button, the event does not just fire on the button. It travels through the DOM in three phases.
- Capturing phase: the event descends from the document root down toward the target.
- Target phase: the event reaches the element you actually clicked.
- Bubbling phase: the event rises back up through every ancestor.
By default, listeners run during bubbling. Pass a third argument of true (or the option capture true) to listen during the descent instead.
Why it matters
- Event delegation relies on bubbling: attach one listener to a parent and inspect event target to handle many children, even ones added later.
- stopPropagation halts further travel, so an inner handler can prevent ancestors from reacting.
- preventDefault cancels the browser default action but does not stop propagation. They are separate controls.
Knowing the order lets you decide where to attach a listener and when to stop the cascade.
Key idea
Events flow down then up through ancestors, so you can delegate on a parent and control travel with stopPropagation.