Czym jest delegowanie?

Delegowanie zdarzeń to wzorzec projektowy, który pozwala pojedynczemu obsługiwaczowi zdarzeń zarządzać zdarzeniami wielu elementów potomnych. Zamiast przypisywać obsługiwacz do każdego elementu, obsługiwacz jest przypisywany do elementu rodzica. Gdy na elemencie potomnym wystąpi zdarzenie, "wypływa" (bubbling) do elementu rodzica, gdzie może je przechwycić i obsłużyć.

Zasada działania:

• Zdarzenie jest generowane na elemencie docelowym (np. <button>).
• Zdarzenie rozprzestrzenia się w górę drzewa DOM do elementów rodziców.
• Obsługiwacz zdarzeń, przypięty do elementu rodzica, przechwytuje zdarzenie.
• W obsługiwaczu można określić, na którym dokładnie elemencie potomnym zdarzenie miało miejsce, używając event.target.

Zalety:

• Wydajność: Mniej obsługiwaczy zdarzeń, co zmniejsza zużycie pamięci i procesora, szczególnie dla dużych list lub tabel.
• Łatwość zarządzania: Łatwiej dodawać i usuwać elementy z DOM, ponieważ nie trzeba ciągle podłączać/odłączać obsługiwaczy.
• Czystość kodu: Mniej powtarzającego się kodu do podłączania obsługiwaczy.

Przykład:

Załóżmy, że mamy listę elementów i chcemy reagować na kliknięcia każdego z nich.

Bez delegacji, musielibyśmy podłączyć obsługiwacz do każdego <li>:

// Pobieramy wszystkie elementy <li>
const listItems = document.querySelectorAll('li');

// Podłączamy obsługiwacz do każdego elementu
listItems.forEach(item => {
    item.addEventListener('click', function() {
        console.log('Kliknięto:', this.textContent);
    });
});

Z delegacją, podłączamy obsługiwacz tylko do <ul>:

// Pobieramy element listy
const list = document.querySelector('ul');

// Podłączamy obsługiwacz do listy
list.addEventListener('click', function(event) {
    // Sprawdzamy, czy kliknięcie było na elemencie <li>
    if (event.target.tagName === 'LI') {
        console.log('Kliknięto:', event.target.textContent);
    }
});

W tym przykładzie używamy event.target, aby określić, który <li> został kliknięty.