What are the three event phases?

Dispatching an event is a round trip through the DOM, not a single delivery to one element. It has three phases:

1. Capture — the event travels down from window through every ancestor to the target.
2. Target — it reaches the element the event actually happened on.
3. Bubble — it travels back up through the same ancestors to window.

outer.addEventListener("click", () => console.log("capture"), true);
inner.addEventListener("click", () => console.log("target"));
outer.addEventListener("click", () => console.log("bubble"));

// clicking inner logs: capture, target, bubble

Listeners run in the bubble phase by default; pass true or { capture: true } to hook into the capture phase instead. event.eventPhase reports which phase is running (1, 2, 3) if you ever need it.

Why there are two directions

Capture lets an ancestor see the event before anything below can cancel it — useful for a global overlay that must intercept clicks even if a child calls stopPropagation(). Bubble is what everything else uses, and it is what makes event delegation possible.

Controlling propagation

event.stopPropagation();           // stop travelling to further elements
event.stopImmediatePropagation();  // also skip other listeners on this element
event.preventDefault();            // cancel the browser's default action

Note the last one is unrelated to the phases — it stops the browser following a link or submitting a form, but the event keeps propagating.

Two things worth remembering

Not every event travels: focus, blur, load and a few others do not bubble, though they can still be caught in the capture phase. And inside a handler, event.target is where the event started while event.currentTarget is the element whose listener is running — during capture and bubble those are different elements, which is exactly what delegation relies on.