Event Propagation

🎭 Event Propagation: The Great Message Journey!

Imagine you’re at a family dinner. When little Timmy spills his juice, the news travels from him → to Mom → to Grandma → until everyone knows! Events in JavaScript travel the same way through your webpage.

🌊 The Big Picture: How Events Travel

When you click a button on a webpage, that click doesn’t just stay on the button. It takes a journey through all the elements around it!

Think of it like dropping a pebble in a pond:

• First, the ripples go inward (capturing)
• Then, the ripples go outward (bubbling)

graph TD
    A["📄 Document"] --> B["🏠 HTML"]
    B --> C["📦 Body"]
    C --> D["📁 Div Container"]
    D --> E["🔘 Button - CLICK!"]
    E -.->|Bubbling| D
    D -.->|Bubbling| C
    C -.->|Bubbling| B
    B -.->|Bubbling| A

🫧 Event Bubbling: News Travels UP!

What Is It?

When you click something, the event bubbles up like a balloon rising through all parent elements.

Simple Example

Imagine three nested boxes:

• Outer Box (Grandma’s house)
• Middle Box (Mom’s room)
• Inner Box (Your toy box)

When you click the toy box:

1. ✅ Toy box knows first
2. ✅ Then Mom’s room knows
3. ✅ Then Grandma’s house knows

Code Example

<div id="grandma">Grandma
  <div id="mom">Mom
    <div id="child">Me!</div>
  </div>
</div>

// When you click "Me!"
// Output: Me! → Mom → Grandma
grandma.onclick = () =>
  console.log("Grandma heard!");
mom.onclick = () =>
  console.log("Mom heard!");
child.onclick = () =>
  console.log("I was clicked!");

Result: “I was clicked!” → “Mom heard!” → “Grandma heard!”

🎈 Remember: Bubbling = Bottom to Top = Child to Parent

🎣 Event Capturing: Listen From the TOP!

What Is It?

Capturing is the opposite of bubbling. The event travels down from the document to the target.

The Fishing Analogy

• Bubbling = Fish swimming UP to surface
• Capturing = You catching fish as they swim DOWN

How to Turn It On

By default, JavaScript uses bubbling. To use capturing, add true as the third parameter:

// Normal (bubbling) - default
element.addEventListener(
  'click',
  handler
);

// Capturing mode - add true!
element.addEventListener(
  'click',
  handler,
  true  // ← This enables capturing!
);

When Does Each Phase Happen?

graph TD
    A["1️⃣ CAPTURING PHASE"] --> B["Document → HTML → Body"]
    B --> C["→ Container → Target"]
    C --> D["2️⃣ TARGET PHASE"]
    D --> E["Event reaches the clicked element"]
    E --> F["3️⃣ BUBBLING PHASE"]
    F --> G["Target → Container → Body"]
    G --> H["→ HTML → Document"]

🛑 stopPropagation(): Stop the Gossip!

What Is It?

Sometimes you want to stop the event from traveling further. Like saying “Don’t tell anyone else!”

The Secret Keeper Analogy

• Timmy tells Mom a secret
• Mom uses stopPropagation()
• Grandma never finds out! 🤫

Code Example

child.addEventListener('click', (e) => {
  console.log("Shh, it's a secret!");
  e.stopPropagation(); // STOP HERE!
  // Mom and Grandma won't know
});

mom.addEventListener('click', () => {
  console.log("Mom heard"); // Never runs!
});

When To Use It?

• ✅ Dropdown menus (clicking inside shouldn’t close it)
• ✅ Modal dialogs (clicking content shouldn’t close modal)
• ✅ Nested interactive elements

⚠️ Warning: Don’t overuse it! It can make debugging hard.

🚫 preventDefault(): Don’t Do Your Normal Job!

What Is It?

Every HTML element has a default behavior. preventDefault() says “Don’t do that default thing!”

Examples of Default Behaviors

Code Example

// Stop a link from navigating
link.addEventListener('click', (e) => {
  e.preventDefault(); // Don't go!
  console.log("Link blocked!");
});

// Stop form from submitting
form.addEventListener('submit', (e) => {
  e.preventDefault(); // Don't reload!
  console.log("Form captured!");
  // Now handle it with JavaScript
});

stopPropagation vs preventDefault

🎯 Key Insight: They do completely different things! You might need both, one, or neither.

🎪 Event Delegation: One Boss, Many Workers

What Is It?

Instead of giving each element its own listener, give one listener to the parent. The parent then figures out which child was clicked!

The Restaurant Analogy

• ❌ Bad: One waiter per table (100 tables = 100 waiters!)
• ✅ Good: One manager watches all tables (1 manager!)

Why Is It Amazing?

1. Memory Efficient - One listener instead of 100
2. Works with new elements - Future children get covered too!
3. Cleaner code - Less to write and maintain

Code Example

<ul id="menu">
  <li>Pizza</li>
  <li>Burger</li>
  <li>Sushi</li>
  <!-- New items added later work too! -->
</ul>

// ❌ Bad: Listener on each item
document.querySelectorAll('li')
  .forEach(li => {
    li.onclick = () =>
      console.log(li.textContent);
  });

// ✅ Good: One listener on parent!
menu.addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    console.log(e.target.textContent);
  }
});

The Magic Properties

parent.addEventListener('click', (e) => {
  // e.target = What was actually clicked
  // e.currentTarget = Where listener is

  console.log("Clicked:", e.target);
  console.log("Listener on:", e.currentTarget);
});

graph LR
    A["Parent - currentTarget"] --> B["Child 1"]
    A --> C["Child 2 - target ✓"]
    A --> D["Child 3"]

✨ Custom Events: Create Your Own Signals!

What Is It?

You’re not limited to click, submit, etc. You can invent your own events!

The Walkie-Talkie Analogy

• Built-in events = Regular phone calls
• Custom events = Your secret walkie-talkie code words!

How To Create One

// Step 1: Create the event
const myEvent = new CustomEvent('pizza-ready', {
  detail: {
    topping: 'pepperoni',
    size: 'large'
  }
});

// Step 2: Listen for it
kitchen.addEventListener('pizza-ready', (e) => {
  console.log("Order up!");
  console.log("Topping:", e.detail.topping);
});

// Step 3: Fire it when needed!
kitchen.dispatchEvent(myEvent);

Real-World Example: Game Score

// When player scores
function playerScored(points) {
  const scoreEvent = new CustomEvent(
    'score-update',
    { detail: { points: points } }
  );
  document.dispatchEvent(scoreEvent);
}

// Scoreboard listens
document.addEventListener('score-update', (e) => {
  scoreboard.textContent = e.detail.points;
});

// Trigger it!
playerScored(100); // Scoreboard shows 100

Custom Event Options

const event = new CustomEvent('my-event', {
  bubbles: true,    // Should it bubble up?
  cancelable: true, // Can preventDefault work?
  detail: { ... }   // Your custom data
});

🧠 Quick Mental Map

graph TD
    A["🎯 Event Propagation"] --> B["🫧 Bubbling"]
    A --> C["🎣 Capturing"]
    A --> D["🛑 stopPropagation"]
    A --> E["🚫 preventDefault"]
    A --> F["🎪 Delegation"]
    A --> G["✨ Custom Events"]

    B --> B1["Child → Parent"]
    C --> C1["Parent → Child"]
    D --> D1["Stop traveling"]
    E --> E1["Stop default action"]
    F --> F1["Parent handles children"]
    G --> G1["Create your own!"]

🎉 You Made It!

Now you understand how events travel through your webpage like messages through a family! Here’s your power toolkit:

🚀 Pro Tip: Event delegation + custom events = The foundation of every modern JavaScript framework!

Next time you click a button, imagine that little event bubble floating up through your page, telling everyone what happened! 🎈