Mi az a delegálás?

Eseménydelegálás egy olyan tervezési minta, amely lehetővé teszi, hogy egyetlen eseménykezelő kezelje több gyermekelem eseményeit. Ahelyett, hogy minden elemhez külön kezelőt rendelne, a kezelőt a szülőelemhez rendeli. Amikor egy esemény történik egy gyermekelemben, az "bubbling" (buborékolás) útján feljebb halad a szülő felé, ahol a kezelő megállíthatja és feldolgozhatja.

Működési elv:

• Az esemény a cél-elemben (pl. <button>) keletkezik.
• Az esemény felfelé terjed a DOM-fán a szülőelemekig.
• A szülőhöz kötött eseménykezelő megfogja az eseményt.
• A kezelőben meghatározható, hogy melyik gyermekelemben történt az esemény, az event.target segítségével.

Előnyök:

• Teljesítmény: Kevesebb eseménykezelő, ez csökkenti a memória- és CPU-felhasználást, különösen nagy listák vagy táblázatok esetén.
• Egyszerűbb kezelés: Könnyebb hozzáadni és eltávolítani elemeket a DOM-ból, mivel nem kell folyamatosan kezelőket kötni vagy szedni.
• Kód tisztasága: Kevesebb ismétlődő kód az eseménykezelők hozzárendeléséhez.

Példa:

Tegyük fel, hogy van egy elemlistánk, és minden elemre kattintásra szeretnénk reagálni.

Delegáció nélkül, minden <li>-hez külön kezelőt kellene kötni:

// Minden `<li>` elem lekérése
const listItems = document.querySelectorAll('li');

// Minden elemhez kezelő hozzáadása
listItems.forEach(item => {
    item.addEventListener('click', function() {
        console.log('Kattintás:', this.textContent);
    });
});

Delegációval, csak a <ul>-hez kötjük a kezelőt:

// Szülőlista lekérése
const list = document.querySelector('ul');

// Kezelő hozzáadása a listához
list.addEventListener('click', function(event) {
    // Ellenőrizni, hogy `<li>`-re kattintottak-e
    if (event.target.tagName === 'LI') {
        console.log('Kattintás:', event.target.textContent);
    }
});

Ebben a példában az event.target segítségével határozzuk meg, melyik <li>-t kattintották meg.