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
Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
Path addizionali per gli asset in ASP.NET Core MVC
Utilizzare una qualunque lista per i parametri di tipo params in C#
Generare la software bill of material (SBOM) in GitHub
Popolare una classe a partire dal testo, con Semantic Kernel e ASP.NET Core Web API
Ottimizzare le performance usando Span<T> e il metodo Split
Migliorare i tempi di risposta di GPT tramite lo streaming endpoint in ASP.NET Core
Utilizzare EF.Constant per evitare la parametrizzazione di query SQL
Cancellare una run di un workflow di GitHub
Gestire la cancellazione di una richiesta in streaming da Blazor
Supportare lo HierarchyID di Sql Server in Entity Framework 8
Effettuare il log delle chiamate a function di GPT in ASP.NET Web API