Cos'è la delega?

Il delegare gli eventi è un modello di progettazione che consente a un singolo gestore di eventi di gestire gli eventi di molti elementi figli. Invece di assegnare un gestore a ogni elemento, il gestore viene assegnato all'elemento genitore. Quando si verifica un evento su un elemento figlio, questo "risale" (bubbling) fino al genitore, dove il gestore può intercettarlo e processarlo.

Principio di funzionamento:

• L'evento viene generato sull'elemento target (ad esempio, <button>).
• L'evento si propaga verso l'alto nell'albero DOM fino agli elementi genitori.
• Il gestore di eventi, associato all'elemento genitore, intercetta l'evento.
• Nel gestore, si può determinare su quale elemento figlio si sia verificato l'evento usando event.target.

Vantaggi:

• Prestazioni: Meno gestori di eventi, il che riduce il consumo di memoria e CPU, specialmente per liste o tabelle grandi.
• Facilità di gestione: È più facile aggiungere e rimuovere elementi dal DOM, poiché non è necessario collegare/disconnettere continuamente i gestori.
• Pulizia del codice: Meno codice ripetitivo per collegare i gestori.

Esempio:

Supponiamo di avere una lista di elementi e di voler reagire a clic su ciascuno.

Senza delega, dovremmo collegare un gestore a ogni <li>:

// Otteniamo tutti gli elementi <li>
const listItems = document.querySelectorAll('li');

// Colleghiamo un gestore a ogni elemento
listItems.forEach(item => {
    item.addEventListener('click', function() {
        console.log('Cliccato su:', this.textContent);
    });
});

Con delega, colleghiamo il gestore solo al <ul>:

// Otteniamo la lista genitore
const list = document.querySelector('ul');

// Colleghiamo il gestore alla lista
list.addEventListener('click', function(event) {
    // Verifichiamo se il clic è stato su un elemento <li>
    if (event.target.tagName === 'LI') {
        console.log('Cliccato su:', event.target.textContent);
    }
});

In questo esempio, usiamo event.target per determinare quale <li> è stato cliccato.