Rimuovi il listener di eventi in JavaScript
![Rimuovi il listener di eventi in JavaScript](/img/JavaScript/feature-image---remove-event-listener.webp)
Questo tutorial insegna come rimuovere un listener di eventi in JavaScript.
Usa il metodo removeEventListener()
per rimuovere Event Listener in JavaScript
Se creiamo un elemento e non vogliamo che esegua il comportamento previsto quando l’utente interagisce con esso, dobbiamo rimuovere l’ascoltatore di eventi da quell’elemento. Otteniamo questo utilizzando la funzione integrata di JavaScript removeEventListener()
. Questa funzione rimuove il listener di eventi associato da un elemento e interrompe la sua azione predefinita. Possiamo disabilitare un clic su un pulsante rimuovendo il listener di eventi ad esso collegato.
La funzione accetta i seguenti parametri:
type
: è una stringa che specifica il tipo di azione dell’utente per la quale vogliamo rimuovere l’ascoltatore di eventi.listener
: La funzione ascoltatore di eventi che vogliamo rimuovere da detto elemento.options
: è un parametro opzionale che aiuta a specificare le caratteristiche dell’ascoltatore di eventi. È possibile impostare le seguenti opzioni:cattura
: è una variabile booleana che dice che l’evento andrà all’ascoltatore registrato prima di passare a qualsiasi evento di destinazione nell’albero del DOM.mozSystemGroup
: Una variabile booleana che indica l’ascoltatore di eventi verrà aggiunta al gruppo di sistema. È disponibile solo per il codice in esecuzione su Chrome di XBL/Firefox.
useCapture
: è una variabile booleana che dice se l’ascoltatore di eventi è un ascoltatore di cattura. È anche un parametro opzionale.
var element_name = document.querySelector('#btn');
var count = 0;
var counter = function(event) {
count++;
// perform the intended function in case of occurence of event
if (count == 2) {
this.removeEventListener('click', myHandler);
}
} element_name.addEventListener('click', counter);
Nel codice sopra, aggiungiamo un listener di eventi e specifichiamo la funzione da eseguire se il listener viene attivato. Se l’utente tenta di attivare nuovamente lo stesso listener, rimuoviamo il listener di eventi utilizzando removeEventListener()
. Otteniamo ciò selezionando prima l’elemento su cui vogliamo aggiungere/rimuovere il listener di eventi. Quindi, inizializziamo un contatore per mantenere il conteggio del numero di clic. Infine, dichiariamo il gestore dell’evento per attivare e anche incrementare il conteggio. Nel caso in cui l’utente faccia clic due volte, viene attivato il removeEventListener()
.
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn