Event-Listener in JavaScript entfernen

In diesem Tutorial erfahren Sie, wie Sie einen Ereignis-Listener in JavaScript entfernen.

Verwenden Sie die Methode removeEventListener(), um den Ereignis-Listener in JavaScript zu entfernen

Wenn wir ein Element erstellen und nicht möchten, dass es sein beabsichtigtes Verhalten ausführt, wenn der Benutzer damit interagiert, müssen wir den Ereignis-Listener aus diesem Element entfernen. Dies erreichen wir, indem wir die in JavaScript eingebaute Funktion removeEventListener() verwenden. Diese Funktion entfernt den angehängten Ereignis-Listener von einem Element und stoppt seine vordefinierte Aktion. Wir können einen Klick auf eine Schaltfläche deaktivieren, indem wir den damit verbundenen Ereignis-Listener entfernen.

Die Funktion akzeptiert die folgenden Parameter:

1. type: Dies ist eine Zeichenkette, die den Typ der Benutzeraktion angibt, für die wir den Ereignis-Listener entfernen möchten.
2. listener: Die Event-Listener-Funktion, die wir aus dem genannten Element entfernen möchten.
3. options: Dies ist ein optionaler Parameter, der hilft, die Eigenschaften des Ereignis-Listeners zu spezifizieren. Folgende Optionen können eingestellt werden:
   • capture: Dies ist eine boolesche Variable, die angibt, dass das Ereignis an den registrierten Listener geht, bevor es zu einem Zielereignis im DOM-Baum wechselt.
   • mozSystemGroup: Eine boolesche Variable, die angibt, dass der Ereignis-Listener zur Systemgruppe hinzugefügt wird. Es ist nur für Code verfügbar, der in Chrome von XBL/Firefox ausgeführt wird.
4. useCapture: Dies ist eine boolesche Variable, die angibt, ob der Event-Listener ein erfassender Listener ist. Es ist auch ein optionaler Parameter.

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);

Im obigen Code fügen wir einen Ereignis-Listener hinzu und geben die Funktion an, die ausgeführt werden soll, wenn der Listener ausgelöst wird. Wenn der Benutzer versucht, denselben Listener erneut auszulösen, entfernen wir den Event-Listener mit dem removeEventListener(). Dies erreichen wir, indem wir zunächst das Element auswählen, für das wir den Ereignis-Listener hinzufügen/entfernen möchten. Dann initialisieren wir einen Zähler, um die Anzahl der Klicks zu zählen. Schließlich deklarieren wir den Ereignishandler zum Auslösen und erhöhen auch die Anzahl. Klickt der Benutzer zweimal, wird der removeEventListener() ausgelöst.