Event Propogation in js Tutorial

JavaScript Theory & Concepts

Event Propagation in JavaScript

Mastering the 3 phases of DOM events: Capturing, Target, and Bubbling, plus Event Delegation.

📖 The Story & Real-World Analogy

The Deep Sea Submarine Dive and Surface

"Imagine a deep-sea research submarine descending to touch a rare seashell on the ocean trench floor (the clicked button element): • **Phase 1: Capturing (Trickling Down)**: The submarine descends from the sky/atmosphere (`window`), through the ocean surface (`document`), through the coral reef (`body`, `div`) down toward the ocean floor. • **Phase 2: Target**: The submarine touches down directly on the seashell. • **Phase 3: Bubbling (Surfacing Up)**: The submarine releases an air bubble that floats all the way back up to the surface, passing through every ancestor in reverse order. By default, JavaScript event listeners wait at the surface and catch the event on its way back up during Bubbling!"

Event Propagation defines how events travel through the DOM hierarchy. Mastering bubbling and capturing allows developers to implement high-performance patterns like Event Delegation.

⚙️ How It Works Under The Hood (Step-by-Step)

1. Capturing Phase (Trickling)

The event journeys from `Window` down through nested ancestor nodes until it reaches the parent of the target element. Enabled by setting `{ capture: true }`.

2. Target Phase

The event reaches the exact element on which the interaction occurred (`e.target`).

3. Bubbling Phase

The event travels upwards from the target element back up to `Window`. This is the default phase for `element.addEventListener("click", fn)`.

Stopping Propagation

`e.stopPropagation()` halts upward/downward travel through the DOM. `e.stopImmediatePropagation()` also prevents other listeners attached to the same element from running.

Event Delegation Pattern

Instead of attaching 1,000 listeners to 1,000 list items, attach 1 listener to their parent container and inspect `e.target` to identify which item was clicked.

💻 Interactive Code Walkthrough

Implementing Event Delegation and distinguishing e.target vs e.currentTarget:

JAVASCRIPT

// Simulating Event Delegation on a dynamic list
const listContainer = {
  handleEvent(e) {
    // e.target: the actual clicked DOM element (e.g., button inside li)
    // e.currentTarget: the element with the listener (listContainer)
    console.log("Target clicked tag:", e.target.tagName);
    console.log("CurrentTarget listener tag:", e.currentTarget.tagName);

    if (e.target.dataset.action === "delete") {
      console.log("Delete item with ID:", e.target.dataset.id);
    }
  }
};

const fakeEvent = {
  target: { tagName: "BUTTON", dataset: { action: "delete", id: "item-42" } },
  currentTarget: { tagName: "UL" }
};

listContainer.handleEvent(fakeEvent);

Console Output:

CODE

Target clicked tag: BUTTON
CurrentTarget listener tag: UL
Delete item with ID: item-42

⚠️ Common Pitfalls & Interview Traps

Trap

Confusing e.target with e.currentTarget

The Risk: `e.target` is the deepest element that triggered the click (e.g. an `` icon inside a button), whereas `e.currentTarget` is the element holding the event listener.

The Fix: Use `e.target.closest("button")` when dealing with nested icons inside clickable elements.

Trap
Overusing stopPropagation()

The Risk: Calling `e.stopPropagation()` breaks page-wide click trackers, analytics tools, and dropdown dismiss listeners.

The Fix: Rely on checking element IDs or classes instead of violently cutting off event propagation.

⚡ 30-Second Quick Revision Cheat Sheet (TL;DR)

✓ 3 phases: Capturing (down) → Target → Bubbling (up).

✓ Default listeners run on the Bubbling phase (`capture: false`).

✓ `e.target` = what was clicked; `e.currentTarget` = where the listener is attached.

✓ Event Delegation attaches one listener on a parent to handle unlimited dynamic children.

✓ Some events do NOT bubble (e.g., `focus`, `blur`, `mouseenter`, `mouseleave`).