DOM Events

JavaScript DOM Event Flow: Propagation, Capturing, & Bubbling

When an event occurs on a DOM element, it does not exist in isolation. The event travels through the DOM tree in three distinct phases: the Capturing Phase, the Target Phase, and the Bubbling Phase.

Event Propagation Phases

flowchart TD
    Window["Window Node"] -->|Phase 1: Capturing Phase (Top Down)| TargetParent["Ancestor Elements (div, body)"]
    TargetParent --> Target["Phase 2: Target Phase (Target Element)"]
    Target -->|Phase 3: Bubbling Phase (Bottom Up)| Window

Propagation Phases Reference

Practical Code Example

// Demonstrating Event Bubbling and Event Delegation

document.addEventListener("DOMContentLoaded", () => {
  const outerBox = document.createElement("div");
  outerBox.id = "outer-box";
  outerBox.style.padding = "20px";
  outerBox.style.background = "#cbd5e1";

  const innerBtn = document.createElement("button");
  innerBtn.id = "inner-btn";
  innerBtn.textContent = "Click Inner Button";

  outerBox.appendChild(innerBtn);
  document.body.appendChild(outerBox);

  // 1. Listener on Child (Target)
  innerBtn.addEventListener("click", (event) => {
    console.log("1. Inner Button Listener Fired!");
    // Uncommenting stops event from bubbling to outerBox:
    // event.stopPropagation();
  });

  // 2. Listener on Parent (Bubbling Phase - Default)
  outerBox.addEventListener("click", (event) => {
    console.log(`2. Outer Box Bubbling Listener Fired! Target was: ${event.target.id}`);
  });

  // 3. Listener on Outer Box in Capturing Phase (Third argument true)
  outerBox.addEventListener("click", () => {
    console.log("0. Outer Box Capturing Listener Fired FIRST!");
  }, true); // capture = true
});

Best Practices & Gotchas

• Use Event Delegation: Attach a single event listener to a common parent container to handle events from dynamic child elements efficiently.
• event.target vs event.currentTarget: event.target refers to the actual element clicked. event.currentTarget refers to the element processing the current event listener.
• stopPropagation() Warning: Use event.stopPropagation() sparingly; stopping event propagation can break third-party analytics or global dropdown click handlers.

Self-Check Challenge

What is the difference between event.target and event.currentTarget during event bubbling?