Təyin etmə nədir?

Hadisə yönləndirməsi, tək bir hadisə idarəedicisinin çoxsaylı uşaq elementlərinin hadisələrini idarə etməsinə imkan verən dizayn nümunəsidir. Hər element üçün idarəedicini təyin etmək əvəzinə, idarəedicini valideyn elementə təyin edirsiniz. Uşaq elementdə hadisə baş verdikdə, bu, "baloncuklaşma" (bubbling) yolu ilə valideynə doğru yuxarı çıxır və burada idarəedicisi onu ələ keçirə və işləyə bilər.

İş prinsipi:

• Hadisə hədəf elementdə (məsələn, <button>) yaranır.
• Hadisə DOM ağacında yuxarı doğru yayılır və valideyn elementlərə çatır.
• Valideynə qoşulmuş hadisə idarəedicisi hadisəni ələ keçirir.
• İdarəedicidə, event.target istifadə edərək, hadisənin hansı uşaq elementində baş verdiyini müəyyən etmək mümkündür.

Üstünlüklər:

• Performans: Daha az hadisə idarəedicisi, bu da yaddaş və CPU istifadəsini azaldır, xüsusən böyük siyahılar və ya cədvəllər üçün.
• İdarəetmənin sadəliyi: DOM-a elementlər əlavə etmək və çıxarmaq daha asandır, çünki davamlı olaraq idarəediciləri qoşmaq və ya ayırmaq lazım deyil.
• Kodun təmizliyi: İdarəediciləri qoşmaq üçün daha az təkrarlanan kod.

Nümunə:

Tutaq ki, bizdə elementlər siyahısı var və hər birinə kliklə reaksiya vermək istəyirik.

Delegasiya olmadan, hər <li> üçün idarəedicini qoşmalı olardıq:

// Bütün `<li>` elementlərini əldə edin
const listItems = document.querySelectorAll('li');

// Hər elementə idarəedicini qoşun
listItems.forEach(item => {
    item.addEventListener('click', function() {
        console.log('Kliklendi:', this.textContent);
    });
});

Delegasiya ilə, yalnız <ul>-ə idarəedicini qoşuruq:

// valideyn siyahını əldə edin
const list = document.querySelector('ul');

// Siyahıya idarəedicini əlavə edin
list.addEventListener('click', function(event) {
    // `<li>`-yə klik olub-olmadığını yoxlayın
    if (event.target.tagName === 'LI') {
        console.log('Kliklendi:', event.target.textContent);
    }
});

Bu nümunədə, hansı <li>-nin klikləndiyini müəyyən etmək üçün event.target istifadə edirik.