JavaScript hodisa delegatsiyasi va ko'pikchi

Yuzta tugmaga yuzta tinglovchi qo’yish shart emas. Hodisalar sahifa bo’ylab yuqoriga ko’tarilishi tufayli bittasi bilan cheklanish mumkin.

Ko’pikchi — hodisa yuqoriga ko’tariladi

JavaScript

document.querySelector("#tashqi").addEventListener("click", () => {
console.log("3 — tashqi div");
});

document.querySelector("#ortacha").addEventListener("click", () => {
console.log("2 — o'rtacha div");
});

document.querySelector("#ichki").addEventListener("click", () => {
console.log("1 — tugma");
});

document.querySelector("#ichki").click();

Sahifa

Bitta bosishdan uchta xabar chiqdi. Hodisa tugmadan boshlanib, ota elementlar bo’ylab yuqoriga ko’tarildi.

target va currentTarget

JavaScript

document.querySelector("#quti").addEventListener("click", (e) => {
console.log("target:", e.target.tagName, e.target.id);
console.log("currentTarget:", e.currentTarget.id);
console.log("—");
});

document.querySelector("#a").click();
document.querySelector("#b").click();

Sahifa

Farq muhim:

target — hodisa aslida qayerda yuz berdi (bosilgan tugma);
currentTarget — tinglovchi qayerga o’rnatilgan (quti).

Delegatsiya naqshi

Shu farqdan foydalanib, bitta tinglovchi bilan ko’p elementni boshqarish:

JavaScript

const ul = document.querySelector("#royxat");

ul.addEventListener("click", (e) => {
if (e.target.dataset.amal !== "ochir") return;

const li = e.target.closest("li");
console.log("O'chirildi:", li.textContent.trim());
li.remove();
});

ul.querySelectorAll("button")[1].click();
console.log("Qolgan:", ul.children.length);

Sahifa

Nega delegatsiya kerak

Asosiy sabab — keyin qo’shilgan elementlar:

JavaScript

const oddiy = document.querySelector("#oddiy");
const delegat = document.querySelector("#delegat");

// 1-usul: har elementga alohida tinglovchi
function oddiyQosh(matn) {
const li = document.createElement("li");
li.textContent = "oddiy: " + matn;
li.addEventListener("click", () => console.log("oddiy bosildi"));
oddiy.append(li);
}

// 2-usul: delegatsiya — tinglovchi bir marta, otaga
delegat.addEventListener("click", (e) => {
if (e.target.tagName === "LI") console.log("delegat bosildi");
});

function delegatQosh(matn) {
const li = document.createElement("li");
li.textContent = "delegat: " + matn;
delegat.append(li);
}

oddiyQosh("A");
delegatQosh("A");

oddiy.firstChild.click();
delegat.firstChild.click();

console.log("Ikkalasi ishladi — lekin delegatsiyada tinglovchi bitta");

Sahifa

Birinchi usulda har yangi element uchun tinglovchi qo’shish esdan chiqmasligi kerak. Delegatsiyada esa bir marta yozilgan tinglovchi kelajakdagi elementlarga ham ishlaydi.

closest — kerakli otani topish

JavaScript

const menyu = document.querySelector("#menyu");

menyu.addEventListener("click", (e) => {
const li = e.target.closest("li");
if (!li) return;

console.log("Bosilgan element:", e.target.tagName);
console.log("Topilgan li, id:", li.dataset.id);
});

menyu.querySelector("b").click();

Sahifa

<b> bosildi, lekin closest("li") yuqoriga qarab kerakli otani topdi. Ichma-ich elementlar bo’lganda bu majburiy — target har doim eng ichkarisi bo’ladi.

stopPropagation — ko’tarilishni to’xtatish

JavaScript

document.querySelector("#tashqi").addEventListener("click", () => {
console.log("tashqi — bu chiqmaydi");
});

document.querySelector("#ichki").addEventListener("click", (e) => {
e.stopPropagation();
console.log("faqat tugma");
});

document.querySelector("#ichki").click();

Sahifa

Amaliy misol — vazifalar ro’yxati

JavaScript

const ul = document.querySelector("#royxat");
const input = document.querySelector("#matn");

document.querySelector("#qosh").addEventListener("click", () => {
const li = document.createElement("li");

const span = document.createElement("span");
span.textContent = input.value;

const bajar = document.createElement("button");
bajar.textContent = "✓";
bajar.dataset.amal = "bajarildi";

const ochir = document.createElement("button");
ochir.textContent = "×";
ochir.dataset.amal = "ochir";

li.append(span, bajar, ochir);
ul.append(li);
});

// Bitta tinglovchi — barcha tugmalar uchun
ul.addEventListener("click", (e) => {
const amal = e.target.dataset.amal;
if (!amal) return;

const li = e.target.closest("li");
const span = li.querySelector("span");

if (amal === "bajarildi") {
  span.style.textDecoration = "line-through";
  console.log("Bajarildi:", span.textContent);
} else if (amal === "ochir") {
  console.log("O'chirildi:", span.textContent);
  li.remove();
}
});

document.querySelector("#qosh").click();
document.querySelector("#qosh").click();
console.log("Qo'shildi:", ul.children.length, "ta");

Sahifa

data-amal atributi qaysi tugma bosilganini aytadi — bu delegatsiyadagi standart usul.

Amaliy mashq

Ichma-ich uch div yasab, ko’pikchi tartibini kuzating;
target va currentTarget ni bir tinglovchida chiqaring;
ro’yxatga delegatsiya bilan o’chirish tugmasini qo’shing;
yangi element qo’shib, tinglovchisiz ham ishlashini tasdiqlang;
closest bilan ichki <b> dan <li> ni toping;
stopPropagation qo’shib, tashqi tinglovchi to’xtaganini ko’ring.

Qisqacha xulosa

Hodisa nishondan yuqoriga ko’tariladi (bubbling).
target — hodisa yuz bergan element, currentTarget — tinglovchi joyi.
Delegatsiya: tinglovchi otaga, tekshiruv target orqali.
Bu keyin qo’shilgan elementlarga ham avtomatik ishlaydi.
closest(selektor) yuqoriga qarab mos otani topadi.
stopPropagation ko’tarilishni to’xtatadi — ehtiyot bilan ishlating.

Keyingi darsda DOM bilan chuqurroq ishlash — element yaratish va joylashtirish.