JS Event Propagation Simulator

Event Propagation Phases

When an event occurs on a DOM element, it doesn't just fire on that element. It goes through three phases:

• Capturing Phase (1): Event travels from window → document → ... → parent of target. Listeners with capture: true fire here.
• Target Phase (2): Event reaches the actual target element. Both capturing and bubbling listeners fire in registration order.
• Bubbling Phase (3): Event travels back up: parent → ... → document → window. Most listeners fire here (default).

stopPropagation()

Prevents the event from continuing to the next element in the propagation path. Other listeners on the same element still fire.

stopImmediatePropagation()

Prevents the event from continuing AND prevents other listeners on the same element from firing.

Event Delegation

Instead of attaching listeners to every child, attach one listener to a parent and use event.target to identify which child was clicked. Reduces memory and works for dynamically added elements.

Key Properties

• event.target — the element that was actually clicked (doesn't change)
• event.currentTarget — the element whose listener is currently firing (changes during propagation)
• event.eventPhase — 1 (capturing), 2 (target), 3 (bubbling)
• event.bubbles — whether this event type bubbles (most do, focus/blur don't)