Co je to delegování?

Delegování událostí je návrhový vzor, který umožňuje jednomu obslužiteli událostí spravovat události mnoha dceřiných prvků. Místo přiřazení obslužitele ke každému prvku je obslužitel přiřazen k rodičovskému prvku. Když dojde k události na dětském prvku, "bublá" (bubbling) směrem vzhůru k rodiči, kde ji může obslužitel zachytit a zpracovat.

Princip fungování:

• Událost je generována na cílovém prvku (například <button>).
• Událost se šíří vzhůru stromem DOM až k rodičovským prvkům.
• Obslužitel událostí připojený k rodičovskému prvku zachytí událost.
• V obslužiteli lze určit, na kterém právě dětském prvku událost nastala, pomocí event.target.

Výhody:

• Výkon: Méně obslužitelů událostí, což snižuje spotřebu paměti a procesoru, zejména u velkých seznamů nebo tabulek.
• Snadnější správa: Je jednodušší přidávat a odstraňovat prvky z DOM, protože není třeba neustále připojovat/odpojovat obslužitele.
• Čistota kódu: Méně opakujícího se kódu pro připojení obslužitelů.

Příklad:

Představme si, že máme seznam prvků a chceme na každý reagovat na kliknutí.

Bez delegace bychom museli připojit obslužitel ke každému <li>:

// Získáme všechny prvky `<li>`
const listItems = document.querySelectorAll('li');

// Připojíme obslužitel ke každému prvku
listItems.forEach(item => {
    item.addEventListener('click', function() {
        console.log('Kliknuto na:', this.textContent);
    });
});

S delegací připojíme obslužitel pouze k <ul>:

// Získáme rodičovský seznam
const list = document.querySelector('ul');

// Připojíme obslužitel k seznamu
list.addEventListener('click', function(event) {
    // Zkontrolujeme, jestli byl klik na `<li>`
    if (event.target.tagName === 'LI') {
        console.log('Kliknuto na:', event.target.textContent);
    }
});

V tomto příkladu používáme event.target k určení, který <li> byl kliknut.