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 Model as a Service su Microsoft Azure
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Disabilitare automaticamente un workflow di GitHub
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Eseguire una query su SQL Azure tramite un workflow di GitHub
Generare token per autenicarsi sulle API di GitHub
Eseguire operazioni con timeout in React
Utilizzare database e servizi con gli add-on di Container App
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Creare alias per tipi generici e tuple in C#
Load test di ASP.NET Core con k6
Sfruttare lo streaming di una chiamata Http da Blazor