Do all events bubble?

No! focus, blur, mouseenter, mouseleave, load, and scroll do NOT bubble. Their bubbling alternatives: focusin/focusout, mouseover/mouseout. Check MDN for each event's bubbles property.

stopPropagation vs preventDefault?

stopPropagation: stops the event from traveling to other elements. preventDefault: stops the browser's default action (form submit, link navigation). They're independent — you might use one, both, or neither.

Why would I use the capture phase?

Rare cases: (1) intercept events before they reach targets (security), (2) handle events that don't bubble (focus/blur), (3) ensure your handler runs first regardless of child element handlers.

Does React handle propagation differently?

React uses a synthetic event system. Events are actually delegated to the root — React simulates bubbling. e.stopPropagation() in React stops React's synthetic bubbling but not native DOM propagation (mostly transparent to you).

JavaScript Event Propagation

Events don't just fire on one element. They travel through the DOM.

Module 8 · DOM & Browser

The Document Object Model is how JavaScript reads and changes web pages. Selecting elements, modifying content, handling events, validating forms, and persisting data in storage are the core skills of frontend development.

Learn Event Propagation in JavaScript — covering Three Phases, Bubbling, Capturing, stopPropagation with interactive visual examples and step-by-step explanations.

About this module

JavaScript in the browser is all about the DOM — the live tree of HTML elements your code can select, modify, and respond to. Click handlers, form validation, dynamic content updates, and local storage all build on DOM APIs.

This module takes you from querySelector to full user interaction patterns. You will learn event delegation, form handling, and how to persist state in localStorage — the skills every frontend developer uses daily.

Why this matters

Understanding event propagation is essential for every JavaScript developer. It shows up in frontend UI code, backend APIs, and framework internals — and getting it wrong leads to bugs that are hard to trace. This chapter builds intuition with visuals so the behavior sticks.

Key topics covered

Three Phases
Bubbling
Capturing
stopPropagation
Practical Use

Where you'll use it

Building interactive web applications with event propagation
Processing and transforming data in frontend and backend code
Writing cleaner, more maintainable JavaScript modules
Debugging and reviewing code during development

Three Phases

Every DOM event goes through three phases.

Click on <button> inside <div> inside <body>:

1CAPTURING: document → html → body → div → button

2TARGET: event fires on button (the target)

3BUBBLING: button → div → body → html → document

// By default, addEventListener listens during BUBBLING:
div.addEventListener("click", handler); // phase 3

// To listen during CAPTURING:
div.addEventListener("click", handler, true); // phase 1
// or: { capture: true }

// Check which phase in the handler:
element.addEventListener("click", (e) => {
  e.eventPhase; // 1=capturing, 2=target, 3=bubbling
});

Bubbling

Events bubble UP from the target to the root.

// HTML:
// <div id="outer">
//   <div id="inner">
//     <button id="btn">Click me</button>
//   </div>
// </div>

outer.addEventListener("click", () => console.log("outer"));
inner.addEventListener("click", () => console.log("inner"));
btn.addEventListener("click", () => console.log("btn"));

// Click the button → output:
// "btn"    (target)
// "inner"  (bubbles up)
// "outer"  (bubbles up)

// The event "bubbles" from child to parent to grandparent...

💡 Bubbling is why event delegation works — a click on a child element also fires on all its ancestors.

Capturing

Events travel DOWN from root to target before bubbling.

// Capture phase (down) + bubble phase (up):
outer.addEventListener("click", () => console.log("outer capture"), true);
inner.addEventListener("click", () => console.log("inner capture"), true);
btn.addEventListener("click", () => console.log("btn"));
inner.addEventListener("click", () => console.log("inner bubble"));
outer.addEventListener("click", () => console.log("outer bubble"));

// Click button → output:
// "outer capture"  ↓ (capturing down)
// "inner capture"  ↓
// "btn"            ● (target)
// "inner bubble"   ↑ (bubbling up)
// "outer bubble"   ↑

Capturing is rarely used. The main use case is intercepting events before they reach the target — like a global click handler that blocks certain actions.

stopPropagation

Stop the event from traveling further.

// stopPropagation — prevent bubbling:
btn.addEventListener("click", (e) => {
  e.stopPropagation();
  console.log("btn clicked");
  // Parent handlers will NOT fire!
});

outer.addEventListener("click", () => {
  console.log("This won't run if btn is clicked");
});

// stopImmediatePropagation — also stops OTHER handlers
// on the SAME element:
btn.addEventListener("click", (e) => {
  e.stopImmediatePropagation();
  console.log("First handler");
});
btn.addEventListener("click", () => {
  console.log("This won't run either!");
});

stopPropagation

Stops bubbling/capturing

Other same-element handlers still fire

stopImmediatePropagation

Stops ALL propagation

Even same-element handlers stop

Practical Use

When propagation knowledge matters.

// 1. Modal close — click outside to close:
overlay.addEventListener("click", () => closeModal());
modal.addEventListener("click", (e) => {
  e.stopPropagation(); // don't close when clicking INSIDE modal
});

// 2. Dropdown menu — close on outside click:
document.addEventListener("click", (e) => {
  if (!dropdown.contains(e.target)) {
    dropdown.classList.add("hidden");
  }
});

// 3. Prevent link navigation in a card:
card.addEventListener("click", () => openCard());
card.querySelector("a").addEventListener("click", (e) => {
  e.stopPropagation(); // let link work normally
});

FAQ

Common questions about event propagation.

// By default, addEventListener listens during BUBBLING: div.addEventListener("click", handler); // phase 3 // To listen during CAPTURING: div.addEventListener("click", handler, true); // phase 1 // or: { capture: true } // Check which phase in the handler: element.addEventListener("click", (e) => { e.eventPhase; // 1=capturing, 2=target, 3=bubbling });

// HTML: // <div id="outer"> // <div id="inner"> // <button id="btn">Click me</button> // </div> // </div> outer.addEventListener("click", () => console.log("outer")); inner.addEventListener("click", () => console.log("inner")); btn.addEventListener("click", () => console.log("btn")); // Click the button → output: // "btn" (target) // "inner" (bubbles up) // "outer" (bubbles up) // The event "bubbles" from child to parent to grandparent...

// Capture phase (down) + bubble phase (up): outer.addEventListener("click", () => console.log("outer capture"), true); inner.addEventListener("click", () => console.log("inner capture"), true); btn.addEventListener("click", () => console.log("btn")); inner.addEventListener("click", () => console.log("inner bubble")); outer.addEventListener("click", () => console.log("outer bubble")); // Click button → output: // "outer capture" ↓ (capturing down) // "inner capture" ↓ // "btn" ● (target) // "inner bubble" ↑ (bubbling up) // "outer bubble" ↑

// stopPropagation — prevent bubbling: btn.addEventListener("click", (e) => { e.stopPropagation(); console.log("btn clicked"); // Parent handlers will NOT fire! }); outer.addEventListener("click", () => { console.log("This won't run if btn is clicked"); }); // stopImmediatePropagation — also stops OTHER handlers // on the SAME element: btn.addEventListener("click", (e) => { e.stopImmediatePropagation(); console.log("First handler"); }); btn.addEventListener("click", () => { console.log("This won't run either!"); });

// 1. Modal close — click outside to close: overlay.addEventListener("click", () => closeModal()); modal.addEventListener("click", (e) => { e.stopPropagation(); // don't close when clicking INSIDE modal }); // 2. Dropdown menu — close on outside click: document.addEventListener("click", (e) => { if (!dropdown.contains(e.target)) { dropdown.classList.add("hidden"); } }); // 3. Prevent link navigation in a card: card.addEventListener("click", () => openCard()); card.querySelector("a").addEventListener("click", (e) => { e.stopPropagation(); // let link work normally });

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

Three Phases

Bubbling

Capturing

stopPropagation

Practical Use

FAQ

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

Three Phases

Bubbling

Capturing

stopPropagation

Practical Use

FAQ