Event Capturing & Bubbling

Definition

The two phases of event propagation in the DOM. Capturing (Trickling) goes from the window down to the target element. Bubbling goes from the target element back up to the window.

Explain Like I'm New

Imagine dropping a pebble in a pond. Capturing is the pebble falling from the sky down to the water surface (Target). Bubbling is the ripples expanding outward from the splash point to the edges of the pond. By default, JavaScript event listeners only trigger during the Bubbling (ripple) phase.

Real World Example

If you have a `<button>` inside a `<div>`, clicking the button triggers the button's `onClick` FIRST, and then the div's `onClick` SECOND, because the event bubbles up.

Common Use Cases

•Event Delegation
•Stopping unwanted parent interactions (`stopPropagation`)

Interactive Example

Console output will appear here...

Interview Questions

basic

What is Event Bubbling?

intermediate

What does `event.stopPropagation()` do?

advanced

How do you attach an event listener to the Capturing phase instead of the Bubbling phase?

Flash Cards

Question

What does stopPropagation do?

Click to reveal answer

Answer

It stops the ripple. If you call `e.stopPropagation()` inside the `<button>` click handler, the event is killed instantly. The parent `<div>` will never know the click happened.

Question

How to attach to the Capturing phase?

Click to reveal answer

Answer

Pass `{ capture: true }` as the third argument to `addEventListener`. `element.addEventListener('click', handler, { capture: true })`.