📌 Kirish

JavaScriptda hodisalar (event) tarqalish mexanizmi mavjud bo‘lib, ulardan biri Event Bubbling hisoblanadi. Bu hodisa bola elementda hodisa sodir bo‘lganda, u ota elementlarga ham yetib borishini anglatadi. Ushbu darsda Event Bubbling haqida tushuncha va amaliy mashg‘ulotlar beriladi.

🎯 1. Event Bubbling qanday ishlaydi?

✅ Hodisa boshlang‘ich (child) elementda sodir bo‘ladi va ota elementlarga tarqaladi.

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

child.addEventListener("click", function () {
    console.log("Bola element bosildi");
});

parent.addEventListener("click", function () {
    console.log("Ota element bosildi");
});

📌 Natija:

• Bola element bosilganda, avval u bosilgani chiqadi, keyin esa ota elementi ham bosilgani chiqadi.

🎯 2. Event.stopPropagation()

✅ Hodisaning tarqalishini to‘xtatish uchun event.stopPropagation() dan foydalaniladi.

child.addEventListener("click", function (event) {
    console.log("Bola element bosildi");
    event.stopPropagation(); // Ota elementga tarqalish to‘xtaydi
});

📌 Vazifa:

• Event Bubbling jarayonini kuzating.
• stopPropagation() ni ishlatib, hodisaning tarqalishini to‘xtating.

🎯 3. Amaliy Mashg‘ulot

✅ Event Bubbling dan foydalanib dinamik elementlar yaratish va o‘chirish.

const container = document.getElementById("container");

container.addEventListener("click", function (event) {
    if (event.target.classList.contains("item")) {
        event.target.remove(); // Elementni o‘chirish
        console.log("Element o‘chirildi");
    }
});

📌 Vazifa: