Introduzione

La gestione degli eventi nel DOM è una parte fondamentale dello sviluppo web interattivo. In questo tutorial, esploreremo come utilizzare addEventListener e la delega degli eventi per gestire eventi su elementi dinamici, con un focus specifico sul filtraggio degli eventi. Impareremo a gestire eventi su una lista di elementi generati dinamicamente, applicando un filtro per eseguire azioni specifiche solo su alcuni di essi.

Codice completo

    
    
    


    
Lista di Elementi
    

        
Elemento 1
        
Elemento 2
        
Elemento 3
    
    Aggiungi Elemento

    

Spiegazione

Nel codice sopra, abbiamo creato una semplice lista di elementi con un pulsante per aggiungere nuovi elementi. Ecco come funziona il codice:

• Selezione degli Elementi: Utilizziamo document.getElementById per selezionare la lista e il pulsante.
• Aggiunta di Elementi: La funzione addItem crea un nuovo elemento <li>, lo popola con del testo e lo aggiunge alla lista.
• Gestione degli Eventi: Utilizziamo addEventListener per ascoltare i click sul pulsante e sulla lista. Quando il pulsante viene cliccato, viene chiamata la funzione addItem.
• Delegazione degli Eventi: Invece di aggiungere un listener a ciascun elemento della lista, aggiungiamo un solo listener alla lista stessa. Questo è un esempio di delegazione degli eventi, che migliora le performance e semplifica la gestione degli eventi.
• Filtraggio degli Eventi: Nella funzione handleItemClick, verifichiamo se l´elemento cliccato ha la classe ´item´. In questo modo, possiamo eseguire azioni solo su elementi specifici, ignorando eventuali click su altri elementi.

Best practice

• Utilizza la delegazione degli eventi: Questo approccio riduce il numero di listener e migliora le performance, specialmente in liste lunghe o dinamiche.
• Filtra gli eventi: Quando utilizzi la delegazione, assicurati di filtrare gli eventi per eseguire azioni solo su elementi pertinenti.
• Rimuovi listener non necessari: Se non hai più bisogno di un listener, rimuovilo per evitare perdite di memoria.
• Utilizza nomi di classi significativi: Usa nomi di classi chiari e descrittivi per facilitare la lettura e la manutenzione del codice.

Riepilogo

In questo tutorial, abbiamo esplorato come utilizzare addEventListener e la delega degli eventi per gestire eventi su elementi dinamici. Abbiamo anche visto come applicare un filtro per eseguire azioni specifiche solo su determinati elementi. Questa tecnica è utile per migliorare la performance e la chiarezza del codice.

Approfondisci con risorse ufficiali

• Documentazione MDN su addEventListener
• Guida agli Eventi in JavaScript
• Document Object Model (DOM)