Per gestire un'interazione utente in JavaScript, abbiamo bisogno di metterci in ascolto di eventi. Sottoscrivendoci al click di un bottone si possono eseguire varie funzionalità; stesso discorso se prendiamo in esame un input in cui dobbiamo inserire del testo o il click all'interno di un'area della pagina.
Ogni evento ha però un peso: più eventi vi sono sulla pagina, più essa risulterà lenta a causa dell'utilizzo di memoria. Inoltre gli eventi non supportano la dinamicità dei componenti all'interno del DOM: se creassimo un evento basato sulla classe .mio-div, ed aggiungessimo a posteriori un nuovo elemento, con la medesima classe, l'evento non sarà automaticamente collegato all'elemento appena inserito.
Per risolvere questi problemi possiamo collegare l'evento al contenitore, ossia al posto di collegarlo al singolo elemento, lo colleghiamo all'elemento padre, gestendo poi all'interno le varie casistiche. Questo ridurrà il numero di eventi che la pagina dovrà gestire, accentrerà il codice in pochi punti manutenibili e gestirà anche gli eventi sulle parti di pagina aggiunte successivamente alla dichiarazione.
const container = document.querySelector('.container'); container.addEventListener('click', function(event) { // gestione evento click per classe mio-div if (event.target.classList.contains('.mio-div')) { console.log('Click mio-div'); } // gestione evento click per classe altro-div if (event.target.classList.contains('.altro-div')) { console.log('Click altro-div'); } });
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Potenziare Azure AI Search con la ricerca vettoriale
Sfruttare al massimo i topic space di Event Grid MQTT
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Utilizzare un numero per gestire la concorrenza ottimistica con SQL Server ed Entity Framework
Generare velocemente pagine CRUD in Blazor con QuickGrid
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Verificare la provenienza di un commit tramite le GitHub Actions
Usare le collection expression per inizializzare una lista di oggetti in C#
Utilizzare Model as a Service su Microsoft Azure
Eseguire query verso tipi non mappati in Entity Framework Core
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Code scanning e advanced security con Azure DevOps