Čo je delegovanie?

Delegovanie udalostí je návrhový vzor, ktorý umožňuje jednému spracovateľovi udalostí spravovať udalosti viacerých detských prvkov. Namiesto priradenia spracovateľa ku každému prvku je spracovateľ priradený k rodičovskému prvku. Keď dôjde k udalosti na dieťati, "bublá" (bubbling) smerom nahor k rodičovi, kde ho môže zachytiť a spracovať.

Princíp fungovania:

• Udalosť je generovaná na cieľovom prvku (napríklad <button>).
• Udalosť sa šíri nahor stromom DOM až k rodičovským prvkom.
• Spracovateľ udalostí, pripojený k rodičovskému prvku, zachytí udalosť.
• V spracovateľovi je možné určiť, na ktorom dieťati sa udalosť stala, pomocou event.target.

Výhody:

• Výkon: Menej spracovateľov udalostí, čo znižuje spotrebu pamäte a CPU, najmä pri veľkých zoznamoch alebo tabuľkách.
• Jednoduché riadenie: Je jednoduchšie pridávať a odstraňovať prvky z DOM, pretože nie je potrebné neustále pripájať/odpojiť spracovateľov.
• Čistota kódu: Menej opakujúceho sa kódu na pripájanie spracovateľov.

Príklad:

Predstavme si, že máme zoznam prvkov a chceme na každý reagovať na kliknutie.

Bez delegácie by sme museli pripojiť spracovateľa ku každému <li>:

// Získame všetky `<li>` prvky
const listItems = document.querySelectorAll('li');

// Pripojíme spracovateľa ku každému prvku
listItems.forEach(item => {
    item.addEventListener('click', function() {
        console.log('Kliknuté na:', this.textContent);
    });
});

S delegáciou pripojíme spracovateľa iba k <ul>:

// Získame rodičovský zoznam
const list = document.querySelector('ul');

// Pripojíme spracovateľa k zoznamu
list.addEventListener('click', function(event) {
    // Skontrolujeme, či bol klik na `<li>`
    if (event.target.tagName === 'LI') {
        console.log('Kliknuté na:', event.target.textContent);
    }
});

V tomto príklade používame event.target na určenie, ktorý <li> bol kliknutý.