Wie entferne ich alle Ereignis-Listener von einem DOM-Objekt in JavaScript?

So entfernen Sie alle Ereignis-Listener eines DOM-Objekts in Javascript/DOM

Einführung

Javascript bietet verschiedene Methoden für Hinzufügen und Entfernen von Ereignis-Listenern zu DOM-Objekten. Es kann jedoch schwierig sein zu verstehen, wie alle an ein Objekt angehängten Ereignis-Listener entfernt werden.

Alle Ereignis-Handler entfernen

Um alle Ereignis-Handler von einem Objekt zu entfernen, Sie können den folgenden Ansatz verwenden:

<code class="javascript">const clone = element.cloneNode(true);</code>

Diese Methode behält Attribute und untergeordnete Elemente bei, aber keine Änderungen an DOM-Eigenschaften.

Entfernen Sie anonyme Ereignishandler für bestimmte Ereignisse Typen

Anonyme Event-Handler werden erstellt, wenn eine Funktion als Rückruf während der Event-Listener-Registrierung verwendet wird, ohne der Funktion einen Namen zuzuweisen. Diese Handler können nicht mit „removeEventListener()“ entfernt werden.

Um dieses Szenario zu bewältigen, können Sie entweder:

1. Die Funktion direkt verwenden, anstatt eine Funktion zurückzugeben:

<code class="javascript">function handler() {
  dosomething();
}

div.addEventListener('click', handler, false);</code>

2. Erstellen Sie eine Wrapper-Funktion, die einen Verweis auf die anonyme Funktion speichert, und verwenden Sie sie mit den benutzerdefinierten Funktionen addEventListener() und removeAllListeners():

<code class="javascript">const addListener = (node, event, handler, capture = false) => {
  // Store references to handlers and nodes
  // ...
  node.addEventListener(event, handler, capture);
};

const removeAllListeners = (targetNode, event) => {
  // Remove listeners from specified nodes
  // ...
};</code>

Verwendung

<code class="javascript">addListener(div, 'click', eventReturner(), false);
// ...
removeAllListeners(div, 'click');</code>

Hinweis:

Stellen Sie sicher, dass Event-Handler-Referenzen aus der globalen Variablen _eventHandlers entfernt werden, wenn Sie Objekte zerstören, um Speicherverluste zu verhindern.

Das obige ist der detaillierte Inhalt vonWie entferne ich alle Ereignis-Listener von einem DOM-Objekt in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!