Delegatsiya nima?

Voqealarni delegatsiya qilish - bu dizayn shablonidir, bu bitta voqea ishlovchisi ko'p bolalar elementlarining voqealarini boshqarishga imkon beradi. Har bir elementga ishlovchi tayinlash o'rniga, ishlovchi ota elementga tayinlanadi. Bolalar elementida voqea yuz berganda, u "balon" (bubbling) orqali ota elementga ko'tariladi, bu yerda ishlovchi uni to'xtatishi va qayta ishlashi mumkin.

Ishlash prinsipi:

• Voqea maqsad elementda (masalan, <button>) yuzaga keladi.
• Voqea DOM daraxtida yuqoriga, ota elementlargacha tarqaladi.
• Ota elementga bog'langan voqea ishlovchisi voqeani to'xtatadi.
• Ishlovchida, event.target yordamida voqea qaysi bolalar elementida yuz berganligini aniqlash mumkin.

Afzalliklar:

• Performans: Kamroq voqea ishlovchilari, bu esa xotira va protsessor iste'molini kamaytiradi, ayniqsa katta ro'yxatlar yoki jadvallar uchun.
• Boshqaruvning soddaligi: DOMga elementlarni qo'shish va olib tashlash osonroq, chunki doimiy ravishda ishlovchilarni ulash yoki ajratish shart emas.
• Kod tozaligi: Ishlovchilarni ulash uchun kamroq takroriy kod.

Misol:

Agar bizda elementlar ro'yxati bo'lsa va har biriga bosish reaktsiyasini istasak.

Delegatsiya bo'lmagan holda, har bir <li> ga ishlovchi qo'shish kerak bo'lardi:

// Barcha `<li>` elementlarini olish
const listItems = document.querySelectorAll('li');

// Har bir elementga ishlovchi qo'shish
listItems.forEach(item => {
    item.addEventListener('click', function() {
        console.log('Bosildi:', this.textContent);
    });
});

Delegatsiya bilan, faqat <ul> ga ishlovchi qo'shamiz:

// ota ro'yxatni olish
const list = document.querySelector('ul');

// `<ul>` ga ishlovchi qo'shish
list.addEventListener('click', function(event) {
    // `<li>` ga bosilganligini tekshirish
    if (event.target.tagName === 'LI') {
        console.log('Bosildi:', event.target.textContent);
    }
});

Bu misolda, qaysi <li> bosilganligini aniqlash uchun event.target dan foydalanamiz.