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
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Sfruttare lo streaming di una chiamata Http da Blazor
Migrare un repository che contiene large file storage objects in GitHub
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Specificare il versioning nel path degli URL in ASP.NET Web API
Utilizzo di Map e Object in Javascript
Intercettare gli eventi di creazione degli oggetti con Entity Framework 7
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Ottimizzare il codice JavaScript utilizzando WeakMap e WeakSet
Effettuare il download di un file via FTP con la libreria FluentFTP di .NET
Effettuare il pull di git LFS in un workflow di GitHub
I più letti di oggi
- .NET Conference Italia 2023 - Milano e Online
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Microsoft Visual Studio Code: un nuovo editor gratuito per Windows, MacOSX e Linux per sviluppatori ASP.NET e Node.js
- Registrare servizi multipli tramite chiavi in ASP.NET Core 8
- Chiamare direttamente un numero di telefono con HTML5