Event Bubbling, Capturing & Once Option in JavaScript

Event Propagation

JavaScript events propagate through the DOM in two phases: capturing (top-down) and bubbling (bottom-up). Additionally, the once option lets you register a listener that runs just one time.

Event Bubbling

Bubbling is the default phase. The event starts at the target element and bubbles up to ancestors. You can stop propagation using event.stopPropagation(). 

element.addEventListener('click', handler, { capture: false });

Try clicking the boxes below to see bubbling in action.

Green
Pink
Blue
Console Output:

Event Capturing

In capturing (or trickling), the event starts at the outermost element and goes inward toward the target. Enable this by setting capture: true. 

element.addEventListener('click', handler, { capture: true });

The once Option

The once option runs the event listener only once. After the first trigger, it's automatically removed. 

element.addEventListener('click', handler, { once: true });

Comparison Table

Aspect Bubbling Capturing Once
Direction Target → Parent → Ancestors Root → Parent → Target Runs only once
Default? Yes No (use capture: true) Optional (once: true)
Use Case Normal event handling Intercept before children One-time setup like intro animation
Stop Propagation event.stopPropagation() event.stopPropagation() Stops after 1 run