JavaScript Alle Ereignis-Listener entfernen

Im heutigen Beitrag erfahren Sie, wie Sie alle Ereignis-Listener in JavaScript entfernen.

Entfernen Sie alle Ereignis-Listener in JavaScript

Die Methode addEventListener() der Schnittstelle EventTarget konfiguriert eine Funktion, die immer dann aufgerufen wird, wenn das angegebene Ereignis an das Ziel geliefert wird.

Die Methode addEventListener() funktioniert durch Hinzufügen einer Funktion oder eines Objekts, das den EventListener implementiert, zur Liste der Ereignis-Listener für den im EventTarget angegebenen Ereignistyp, für den sie aufgerufen wird.

Wenn sich die Funktion oder das Objekt bereits in der Liste der Ereignis-Listener für dieses Ziel befindet, wird die Funktion oder das Objekt kein zweites Mal hinzugefügt.

Die Methode removeEventListener() der Schnittstelle EventTarget entfernt einen Ereignis-Listener, der zuvor mithilfe von EventTarget.addEventListener() aus dem Ziel registriert wurde.

Der Aufruf von removeEventListener() mit Argumenten, die keinen aktuell im EventTarget registrierten EventListener identifizieren, hat keine Wirkung.

Das Ereignis wird nicht ausgelöst, wenn ein EventListener von einem EventTarget entfernt wird, während ein anderer Listener auf dem Ziel ein Ereignis verarbeitet. Es kann jedoch neu positioniert werden.

Der Aufruf von removeEventListener ist einfach, wenn nur ein oder zwei Listener für bestimmte Elemente registriert sind. Was ist, wenn mehr als 10 Listener registriert sind und Sie alle Ereignis-Listener entfernen möchten?

Es wird Mühe kosten; Wir werden eine andere Methode lernen, um diese mühsame Operation durchzuführen, um dies zu überwinden.

Schauen wir uns das Beispiel unten an.

<div>
<button id="grt-btn">Hello World!</button>
<button onclick="removeListeners()">Remove listeners</button>
</div>

document.getElementById('grt-btn').addEventListener(
    'click', () => {console.log('firstClick')}, false);
document.getElementById('grt-btn').addEventListener(
    'blur', () => {console.log('Blur event')}, false);
document.getElementById('grt-btn').addEventListener(
    'focus', () => {console.log('focus event')}, false);

function removeListeners() {
  const oldBtnElement = document.getElementById('grt-btn');
  const newBtnElement = oldBtnElement.cloneNode(true);
  oldBtnElement.parentNode.replaceChild(newBtnElement, oldBtnElement);
  console.log('Removed all listners')
}

Im obigen Beispiel haben wir 2 Schaltflächen definiert. Die erste Schaltfläche ist diejenige, die Zuhörer damit verbindet.

Die zweite Schaltfläche entfernt Zuhörer von der ersten Schaltfläche.

Wir haben drei Ereignis-Listener definiert; Sobald Sie auf die Schaltfläche Hello World klicken, werden die Ereignisse focus und click ausgelöst. Versuchen Sie, zu einem anderen Tab zu navigieren; es löst das blur-Ereignis aus.

Klicken Sie schließlich auf die Schaltfläche Zuhörer entfernen, wodurch die Schaltfläche Hello World geklont wird. Der letzte Schritt besteht darin, den untergeordneten Knoten des Elements div durch cloneNode zu ersetzen.

Dadurch werden automatisch alle zuvor mit der Schaltfläche verknüpften Ereignis-Listener entfernt.

Wenn Sie erneut versuchen, auf die Schaltfläche Hello World zu klicken, werden keine Ereignisse ausgelöst.

Ausgang:

"focus event"
"firstClick"
"Blur event"
"focus event"
"Blur event"
"Removed all listeners"

Demo hier