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
Utilizzare flat e flatMap per appiattire array innestati in array
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
3 metodi JavaScript che ogni applicazione web dovrebbe contenere - Parte 2
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Elencare le container images installate in un cluster di Kubernetes
Evitare il flickering dei componenti nel prerender di Blazor 8
Utilizzare un service principal per accedere a Azure Container Registry
Monitorare i server on-premises con Azure Arc
Effettuare update massivi con Entity Framework Core 7
Catturare la telemetria degli eventi di output cache in ASP.NET Core
Gestire undefined e partial nelle reactive forms di Angular
I più letti di oggi
- Evitare il flickering dei componenti nel prerender di Blazor 8
- Rilasciata la Beta 2 di Visual Studio 2008
- tra pochi minuti inizia la keynote della seconda giornata. seguila live su http://aspitalia.com/mix-11 #mix11
- .@dbochicchio ora su #aspnetcore 2 a #netconfit https://aspit.co/netconf-17
- Utilizzare angular-cli per creare una direttiva in Angular 2
- Windows Vista: il ritorno di WinFS con la beta1
- .@CristianCivera tra poco su #azure con i suoi tips&tricks per lo sviluppatore web: https://aspit.co/web15-live #aspilive
- Le novità di C# 10