Skip to content

Event Propagation

Click through an interactive DOM tree and trace capture, target and bubble phases node by node.

Beginner~8 min

What you'll learn

  • Order the three propagation phases
  • Understand delegation and stopPropagation trade-offs

Interactive laboratory

Controls

Real click events on real DOM nodes

DOM tree

click the inner button

Outer

Middle

Default action

Link with a real default action

Delegation (one parent listener)

Parent handler saw: nothing yet

Event timeline

0 handlers

No events recorded yet.

Handlers executed
0
Capture / target / bubble
0 / 0 / 0
Propagation stopped
no
Default prevented
no

What happened?

Click the inner button to record the capture → target → bubble sequence produced by the browser.

stopPropagation() halts the walk through the tree; the handler that called it still finished. It does not cancel the default action. Conversely, preventDefault() cancels the browser's default behaviour (following a link, submitting a form) while the event keeps propagating. They are independent.

The list above uses delegation: a single listener on the ul reads event.target during the bubble phase, which is why adding items needs no new listeners.

Why it happened

DOM events travel down the tree and back up again, passing every ancestor twice.

Delegation, portals and stopPropagation all follow from that single mechanism.

Key takeaways

  • Capture runs top-down before the target handler
  • Delegation relies on bubbling and one listener

Tags

  • dom
  • events
  • bubbling
  • capture