20. DOM Event Propagation: Capturing, Target, Bubbling & Delegation • JavaScript & Advanced ES6+ (0-to-Hero Big Tech Standard) • Rishabh Ki Kaksha

Jab tu kisi HTML webpage par kisi button par click karta hai, toh click event sirf us button par nahi hota — **poore DOM Tree me ek tsunami ki tarah travel karta hai!**

Is travel process ko **Event Propagation** kehte hain, jisme 3 phases hote hain:

1. **Capturing Phase (Trickling Down):** Event `window ➔ document ➔ body ➔ parent` tak neeche travel karta hai.
2. **Target Phase:** Event actual target element (Button) par pahunchta hai.
3. **Bubbling Phase (Bubbling Up):** Event wapas button se `parent ➔ body ➔ document ➔ window` ki taraf upar uthta hai (Default behavior).

---

### 2. `addEventListener` Ka 3rd Argument (Capture Flag)

```javascript
const parent = document.getElementById("parent");
const child = document.getElementById("child");

// Bubbling Phase me sunna (Default: useCapture = false)
parent.addEventListener("click", () => console.log("Parent Bubbling 🫧"), false);

// Capturing Phase me sunna (useCapture = true)
parent.addEventListener("click", () => console.log("Parent Capturing ⬇️"), true);

child.addEventListener("click", () => console.log("Child Clicked 🎯"));
```
*Output sequence jab Child click hoga:*
1. `Parent Capturing ⬇️`
2. `Child Clicked 🎯`
3. `Parent Bubbling 🫧`

---

### 3. Event Control: `stopPropagation()` vs `stopImmediatePropagation()`

*   **`e.stopPropagation()`:** Event ko agle parent elements tak bubble/capture hone se rok deta hai.
*   **`e.stopImmediatePropagation()`:** Agar ek hi element par 3 click listeners lage hain, toh baaki ke 2 listeners ko bhi execute hone se turant rok deta hai!
*   **`e.preventDefault()`:** Browser ke default action ko rokta hai (jaise form submit hone par page reload hona ya link click hone par navigate hona).

---

### 4. High-Scale Event Delegation (Big Tech Performance Hack)

Soch tere paas ek E-Commerce product list me **10,000 products** hain.  
*   ❌ **Worst Practice:** 10,000 buttons par 10,000 alag `addEventListener` lagana (Heavy RAM memory leak).
*   ✅ **Event Delegation:** Sirf **1 single listener** Parent `<ul>` par lagao aur `e.target.closest()` se pata lagao kaunsa item click hua!

```javascript
const productGrid = document.getElementById("productGrid");

productGrid.addEventListener("click", function(e) {
    // Check karo ki click product card ke delete button par hua hai ya nahi
    const deleteBtn = e.target.closest(".btn-delete");
    if (!deleteBtn) return; // Ignore clicks outside

const productId = deleteBtn.dataset.id;
    console.log("⚡ Deleting Product ID:", productId);
});
```

---

### 5. Comparison Table: Capturing vs Bubbling vs Delegation

| Concept | Direction | Default in Browser | Big Tech Use Case |
| :--- | :--- | :--- | :--- |
| **Capturing** | Top to Bottom (`Window -> Target`) | ❌ Off (Needs `{capture: true}`) | Global security interceptors, analytics |
| **Bubbling** | Bottom to Top (`Target -> Window`) | ✅ Active by default | Form validation bubbling, UI modal dismiss |
| **Delegation**| Parent handles child events | Pattern using Bubbling | 10k+ dynamic lists, Infinite scrolling feeds |

---

### 6. Interview Ke 3 Sawal Is Topic Se

1. **Event Delegation dynamic elements ke sath kaise kaam karta hai?** -> Kyunki listener parent par laga hota hai, future me runtime par add huye naye child elements ke events bhi parent tak bubble hoke automatically handle ho jate hain.
2. **`e.target` aur `e.currentTarget` me kya fark hai?** -> `e.target` wo actual element hai jispar click hua; `e.currentTarget` wo element hai jispar `addEventListener` attach kiya gaya hai.
3. **`stopImmediatePropagation()` kab use hota hai?** -> Jab ek hi DOM element par multiple listeners lage hon aur pehla listener aage ke kisi bhi listener ko execute na hone dena chahe.

---
**Next Topic:** 21. Debouncing vs Throttling: Production Polyfills (Leading & Trailing)

Loading lesson content...

🎯 Big Tech Coding & Interview Challenges

Practice these curated problems. Click "Load in Sandbox" to solve live in the Code Studio!

1 Questions

Easy

1. High-Scale Event Delegation Manager

Implement an event delegation handler `delegate(parentEl, selector, eventType, handler)` that intercepts events from dynamically created children.

💡 View Pro Interview Hint

• Use e.target.closest(selector).

JavaScript

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

🎯 Big Tech Coding & Interview Challenges

1. High-Scale Event Delegation Manager

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track