Event Delegation & Bubbling

12 min read•Frontend Patterns & Concepts

Event Delegation & Bubbling

Understanding how events flow through the DOM is fundamental to building efficient, maintainable frontend applications. Event delegation is one of the most powerful patterns that emerges from this understanding.

The Event Lifecycle

When an event occurs, it goes through three phases:

PLAINTEXT

┌─────────────────────────────────────────────────────┐
│  1. CAPTURING PHASE (top-down)                      │
│     window → document → html → body → ... → target  │
├─────────────────────────────────────────────────────┤
│  2. TARGET PHASE                                    │
│     Event reaches the actual element that was       │
│     clicked/interacted with                         │
├─────────────────────────────────────────────────────┤
│  3. BUBBLING PHASE (bottom-up)                      │
│     target → ... → body → html → document → window  │
└─────────────────────────────────────────────────────┘

Visualizing Event Flow

HTML

<div id="outer">
  <div id="inner">
    <button id="btn">Click Me</button>
  </div>
</div>

JAVASCRIPT

function logPhase(element, phase) {
  element.addEventListener(
    "click",
    (e) => {
      console.log(`${phase}: ${element.id || element.tagName}`);
    },
    phase === "capture",
  );
}
 
// Log all phases
["outer", "inner", "btn"].forEach((id) => {
  const el = document.getElementById(id);
  logPhase(el, "capture");
  logPhase(el, "bubble");
});
 
// Click the button - output:
// capture: outer
// capture: inner
// capture: btn (target phase, but registered as capture)
// bubble: btn  (target phase, but registered as bubble)
// bubble: inner
// bubble: outer

Event Bubbling Deep Dive

Most events bubble up from the target to the root. This is the default behavior.

JAVASCRIPT

document.getElementById("child").addEventListener("click", (e) => {
  console.log("Child clicked");
  console.log("Target:", e.target); // Actual clicked element
  console.log("CurrentTarget:", e.currentTarget); // Element with the handler
});
 
document.getElementById("parent").addEventListener("click", (e) => {
  console.log("Parent received bubble");
  console.log("Target:", e.target); // Still the original target
  console.log("CurrentTarget:", e.currentTarget); // Now the parent
});

target vs currentTarget

This distinction is crucial:

JAVASCRIPT

document.getElementById("list").addEventListener("click", (e) => {
  console.log("e.target:", e.target);
  // The actual element clicked (could be <li>, <span>, <a> inside <li>)
 
  console.log("e.currentTarget:", e.currentTarget);
  // Always the element with the listener attached (the <ul>)
});

Events That Don't Bubble

Some events don't bubble by design:

JAVASCRIPT

const events = {
  bubbles: ["click", "mousedown", "keydown", "input", "change", "submit"],
  doesNotBubble: [
    "focus",
    "blur",
    "mouseenter",
    "mouseleave",
    "load",
    "scroll",
  ],
};
 
// For non-bubbling events, use capture phase
document.addEventListener(
  "focus",
  (e) => {
    console.log("Something focused:", e.target);
  },
  true,
); // true = capture phase

Event Capturing

Capturing happens before bubbling, going from root to target.

JAVASCRIPT

// Third parameter: true = capture phase
element.addEventListener("click", handler, true);
 
// Or use options object (more explicit)
element.addEventListener("click", handler, { capture: true });

When to Use Capturing

JAVASCRIPT

// 1. Intercept events before they reach targets
document.addEventListener(
  "click",
  (e) => {
    if (e.target.matches(".disabled")) {
      e.stopPropagation();
      console.log("Blocked click on disabled element");
    }
  },
  true,
);
 
// 2. Handle focus/blur across document
document.addEventListener(
  "focus",
  (e) => {
    trackFocusedElement(e.target);
  },
  true,
);
 
// 3. Create modal trap
modal.addEventListener(
  "click",
  (e) => {
    // Stop all clicks inside modal from reaching document
    e.stopPropagation();
  },
  true,
);

Stopping Propagation

stopPropagation()

Prevents the event from continuing to other elements:

JAVASCRIPT

element.addEventListener("click", (e) => {
  e.stopPropagation();
  // Event won't bubble up to parent elements
  // Other handlers on THIS element still run
});

stopImmediatePropagation()

Stops propagation AND prevents other handlers on the same element:

JAVASCRIPT

element.addEventListener("click", (e) => {
  console.log("First handler");
});
 
element.addEventListener("click", (e) => {
  e.stopImmediatePropagation();
  console.log("Second handler - stops here");
});
 
element.addEventListener("click", (e) => {
  console.log("Third handler - never runs");
});

When NOT to Stop Propagation

JAVASCRIPT

// ❌ BAD: Breaks analytics, modals, dropdowns
button.addEventListener("click", (e) => {
  e.stopPropagation(); // Now document click handlers never fire!
  doSomething();
});
 
// ✅ BETTER: Use event.defaultPrevented or custom flags
button.addEventListener("click", (e) => {
  e.preventDefault();
  e.handledByButton = true;
  doSomething();
});
 
document.addEventListener("click", (e) => {
  if (e.handledByButton) return; // Check flag instead
  closeDropdowns();
});