Chapter 34 — Event Delegation & Bubbling

Bu bob — DOM hodisalarining eng chuqur va kuchli mavzusi. Chapter 33'da event.target haqida qisqacha eslatib o'tgan edik — endi buning ortida turgan mexanizmni to'liq ochib beramiz.

---

34.1 ⚠️ Qiyin mavzu: Event Bubbling nima?

Simple Explanation

Event Bubbling — hodisa element ustida yuz berganda, u faqat o'sha elementda emas, balki uning barcha ota-elementlarida ham (tepaga qarab, "ko'pikdek ko'tarilib") ketma-ket ishga tushishi.

Real-Life Analogy

🫧 Bubbling — bu suv ostida ko'pik ko'tarilishiga o'xshaydi: ko'pik (event) eng pastki nuqtada (bosilgan elementda) paydo bo'ladi, keyin sirtga qarab (ota-elementlarga) ko'tarilib boradi, har bir "qatlam"dan o'tib ketadi.

Example

index.html
HTMLNusxalash
01<div id="outer">
02    Tashqi
03    <div id="middle">
04        O'rta
05        <button id="inner">Bosing</button>
06    </div>
07</div>

script.js
JavaScriptNusxalash
01document.getElementById("outer").addEventListener("click", () => {
02    console.log("Outer bosildi");
03});
04 
05document.getElementById("middle").addEventListener("click", () => {
06    console.log("Middle bosildi");
07});
08 
09document.getElementById("inner").addEventListener("click", () => {
10    console.log("Inner (button) bosildi");
11});

Agar foydalanuvchi faqat tugmani (inner) bossa, natija:

code.text
TEXTNusxalash
01Inner (button) bosildi
02Middle bosildi
03Outer bosildi

Diagram — Bubbling qanday ishlaydi

code.text
TEXTNusxalash
01        outer  ←──┐
02          │        │ 3-qadam
03        middle ←──┤
04          │        │ 2-qadam
05        inner  ←──┘ 1-qadam (bosilgan joy)
06       (button)

Explanation

Garchi foydalanuvchi faqat inner tugmasini bossa ham, hodisa avtomatik ravishda uning barcha ota-elementlariga ham "ko'tariladi" va ularning har birida o'rnatilgan listener'lar ham ishga tushadi — bu standart DOM xatti-harakati.

🔥 Important
Aksariyat hodisalar (click, mouseover va h.k.) bubbling qiladi. Lekin ba'zi hodisalar (masalan, focus, blur) — bubbling qilmaydi.

34.2 event.target vs event.currentTarget

Simple Explanation

Bubbling jarayonida, ikkita muhim propertyni farqlash kerak:

• event.target — hodisa aslida qayerda boshlangan (foydalanuvchi qayerni bosgan).
• event.currentTarget — hodisa hozir qaysi listenerda ishlayotgan (this bilan bir xil).

Example

script.js
JavaScriptNusxalash
01document.getElementById("outer").addEventListener("click", function (event) {
02    console.log("target: " + event.target.id);
03    console.log("currentTarget: " + event.currentTarget.id);
04});

Agar foydalanuvchi inner tugmasini bossa:

code.text
TEXTNusxalash
01target: inner
02currentTarget: outer

Explanation

event.target — har doim, listener qaysi elementda o'rnatilganidan qat'i nazar, haqiqiy bosilgan elementni ko'rsatadi. event.currentTarget esa — listener hozir ishlayotgan elementni (bu holatda outer) ko'rsatadi.

💡 Key Idea
Bu farq — keyingi bo'limda ko'rib chiqiladigan Event Delegation naqshining asosini tashkil qiladi.

34.3 stopPropagation() — Bubbling'ni to'xtatish

Simple Explanation

event.stopPropagation() — hodisaning yuqoriga "ko'tarilishini" (bubbling'ni) to'xtatadi.

Example

script.js
JavaScriptNusxalash
01document.getElementById("inner").addEventListener("click", function (event) {
02    event.stopPropagation();
03    console.log("Faqat inner ishladi");
04});
05 
06document.getElementById("outer").addEventListener("click", function () {
07    console.log("Bu hech qachon chiqmaydi (agar inner bosilsa)");
08});

⚠️ Common Mistake
stopPropagation()ni haddan tashqari ko'p ishlatish — dasturni "bashorat qilib bo'lmaydigan" holga keltiradi, chunki boshqa qismlarda (masalan, analytics kuzatuvi uchun ota-elementga qo'yilgan umumiy listener'da) hodisa kutilganidek ishlamay qoladi. Bu metod faqat chindan ham zarur bo'lgandagina ishlatilishi tavsiya etiladi.

34.4 ⚠️ Qiyin mavzu: Event Delegation (Vakolat berish)

Simple Explanation

Event Delegation — har bir bola elementga alohida-alohida listener qo'shish o'rniga, bitta umumiy listenerni ota-elementga qo'yib, event.target orqali qaysi bola element bosilganini aniqlash texnikasi. Bu — Bubbling mexanizmining eng kuchli amaliy qo'llanilishi.

Nega bu foydali?

Aytaylik, sizda 100 ta <li> elementi bor va har biriga click listener kerak. Buni ikki xil usulda amalga oshirish mumkin.

Yomon usul — har biriga alohida listener

script.js
JavaScriptNusxalash
01let items = document.querySelectorAll("li");
02 
03items.forEach(item => {
04    item.addEventListener("click", function () {
05        console.log("Bosildi: " + this.textContent);
06    });
07});
08// 100 ta alohida listener — xotirada ko'p joy egallaydi

Muammo: Bu — 100 ta alohida listener yaratadi. Bundan tashqari, agar keyinchalik yangi <li> element dinamik qo'shilsa (masalan, JavaScript orqali), unga listener avtomatik qo'shilmaydi — uni alohida qo'shish kerak bo'ladi.

Yaxshi usul — Event Delegation

script.js
JavaScriptNusxalash
01let list = document.getElementById("myList");
02 
03list.addEventListener("click", function (event) {
04    if (event.target.tagName === "LI") {
05        console.log("Bosildi: " + event.target.textContent);
06    }
07});

Explanation

Bu yerda — bitta yagona listener, <ul> elementining o'zida. Bubbling tufayli, har qanday <li> bosilganda, hodisa <ul>gacha "ko'tariladi", va biz event.target orqali aynan qaysi <li> bosilganini aniqlaymiz.

Diagram

code.text
TEXTNusxalash
01Yomon usul:                     Yaxshi usul (Delegation):
02<ul>                            <ul> ← BITTA listener shu yerda
03 ├─ <li> [listener 1]
04 ├─ <li> [listener 2]            ├─ <li>
05 ├─ ...                          ├─ <li>
06 └─ <li> [listener 100]          └─ <li>  (hech biriga listener yo'q)

Nima uchun bu ancha yaxshi?

1. Kam xotira — faqat bitta listener, yuzlab emas.
2. Dinamik elementlar bilan avtomatik ishlaydi — agar keyinchalik yangi <li> qo'shilsa, listener uni ham "avtomatik qamrab oladi", chunki listener ota-elementda, va yangi bola ham bubbling qiladi.

Amaliy misol — dinamik ro'yxat

script.js
JavaScriptNusxalash
01let list = document.getElementById("myList");
02 
03list.addEventListener("click", function (event) {
04    if (event.target.tagName === "LI") {
05        event.target.classList.toggle("done");
06    }
07});
08 
09// Keyinroq dinamik ravishda yangi element qo'shilsa:
10let newItem = document.createElement("li");
11newItem.textContent = "Yangi vazifa";
12list.appendChild(newItem);
13 
14// newItem ustiga bosilganda ham, YUQORIDAGI listener ishlaydi —
15// chunki unga alohida listener qo'shish shart emas edi!

🔥 Important
Event Delegation — zamonaviy veb-dasturlashda (ayniqsa, ro'yxatlar, jadvallar, dinamik kontentda) juda keng qo'llaniladigan, muhim naqsh hisoblanadi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
Ichma-ich joylashgan ikkita <div> yarating (outer va inner). Ikkalasiga ham click listener qo'shib, innerni bosganda ikkala listener ham ishga tushishini (bubbling tufayli) tekshiring.
Required Concepts:

• Event Bubbling
  Hint:
  Chapter 34.1'dagi misolga o'xshab yozing.

🟡 Exercise 2 — Medium

Task:
inner elementga stopPropagation() qo'shib, outerning listeneri endi ishga tushmasligini tekshiring.
Required Concepts:

• stopPropagation()
  Hint:
  event.stopPropagation()ni innerning listeneri ichiga yozing.

🔴 Exercise 3 — Hard

Task:
<ul id="todoList"> yarating, ichida bir nechta <li> (har birida matn va "O'chirish" tugmasi). Event Delegation yordamida, todoListning o'ziga bitta listener qo'ying: agar bosilgan element "O'chirish" tugmasi bo'lsa (event.target.classList.contains("delete-btn")), uning ota-<li>sini butunlay o'chiring (event.target.closest("li").remove()).
Required Concepts:

• Event Delegation
• closest()
• remove()
  Hint:
  closest("li") — eng yaqin <li> ota-elementini topadi.

🔮 Predict the Output

index.html
HTMLNusxalash
01<div id="a">
02    <div id="b">
03        <div id="c"></div>
04    </div>
05</div>

script.js
JavaScriptNusxalash
01document.getElementById("a").addEventListener("click", () => console.log("A"));
02document.getElementById("b").addEventListener("click", () => console.log("B"));
03document.getElementById("c").addEventListener("click", () => console.log("C"));
04 
05document.getElementById("c").click(); // dasturiy ravishda bosish

🧠 Think first! Javobni ko'rishdan oldin kamida 30 soniya o'ylang.

<details> <summary>Answer</summary> C B A

Why?
c.click() — c elementida click hodisasini dasturiy ravishda ishga tushiradi. Bubbling tufayli, bu hodisa avval cning o'zida ("C"), keyin bda ("B"), keyin ada ("A") ishga tushadi — eng ichkaridan tashqariga qarab.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor — dasturchi ro'yxatga dinamik qo'shilgan elementlar uchun ham click ishlashini kutmoqda, lekin ishlamayapti:

script.js
JavaScriptNusxalash
01let items = document.querySelectorAll("#list li");
02 
03items.forEach(item => {
04    item.addEventListener("click", () => {
05        console.log("Bosildi: " + item.textContent);
06    });
07});
08 
09// Keyinroq:
10let newItem = document.createElement("li");
11newItem.textContent = "Yangi element";
12document.getElementById("list").appendChild(newItem);
13 
14// newItem bosilganda hech narsa chiqmaydi

Your Task:

• Nima uchun yangi qo'shilgan elementda click ishlamayotganini tushuntiring.
• Kodni Event Delegation yordamida tuzating.

<details> <summary>Solution</summary> Muammo: querySelectorAll — kod ishga tushgan paytdagi mavjud &lt;li&gt; elementlarinigina tanladi. Keyinroq dinamik qo'shilgan newItem — bu tanlovda umuman qatnashmagan, shuning uchun unga hech qanday listener biriktirilmagan.

Yechim — Event Delegation:

script.js
JavaScriptNusxalash
01let list = document.getElementById("list");
02 
03list.addEventListener("click", function (event) {
04    if (event.target.tagName === "LI") {
05        console.log("Bosildi: " + event.target.textContent);
06    }
07});
08 
09// Endi yangi qo'shilgan elementlar ham AVTOMATIK ishlaydi:
10let newItem = document.createElement("li");
11newItem.textContent = "Yangi element";
12list.appendChild(newItem);

</details>

📌 Chapter Summary

• Event Bubbling — hodisa bosilgan elementdan tashqi elementlarga qarab "ko'tariladi".
• event.target — haqiqiy bosilgan element, event.currentTarget — listener joylashgan element.
• stopPropagation() — bubbling jarayonini to'xtatadi.
• Event Delegation — bitta umumiy listener orqali, ko'p bola elementlarni boshqarish naqshi.
• Event Delegation — dinamik qo'shilgan elementlar bilan ham avtomatik ishlaydi.

🎯 Key Takeaways

• Bubbling — DOM'ning standart xatti-harakati, aksariyat hodisalarda mavjud.
• Event Delegation — ko'p sonli o'xshash elementlar (ro'yxat, jadval) bilan ishlashning eng samarali usuli.
• event.target.tagName yoki classList.contains() — delegation ichida "qaysi element bosilgani"ni aniqlash uchun ishlatiladi.
• Delegation — dinamik DOM (keyinchalik qo'shiladigan elementlar) bilan ishlashda katta afzallik beradi.
• stopPropagation()ni ehtiyotkorlik bilan, faqat zarur bo'lgandagina ishlating.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01// Bubbling
02parent.addEventListener("click", (e) => {
03    console.log(e.target);        // aniq bosilgan element
04    console.log(e.currentTarget); // listener joylashgan element
05});
06 
07e.stopPropagation(); // bubbling'ni to'xtatish
08 
09// Event Delegation
10list.addEventListener("click", (e) => {
11    if (e.target.matches("li")) {
12        console.log(e.target.textContent);
13    }
14});

---