Rimuovi il listener di eventi in JavaScript

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:

1. type: è una stringa che specifica il tipo di azione dell’utente per la quale vogliamo rimuovere l’ascoltatore di eventi.
2. listener: La funzione ascoltatore di eventi che vogliamo rimuovere da detto elemento.
3. 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.
4. 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().