So entfernen Sie alle Ereignis-Listener aus einem DOM-Objekt in JavaScript: Eine umfassende Anleitung

Javascript/DOM: So entfernen Sie alle Ereignis-Listener aus einem DOM-Objekt

Es stellt sich die Frage: Wie kann man alle Ereignisse vollständig entfernen? ein Objekt, z. B. ein Div? Insbesondere bezieht sich die Abfrage auf ein Ereignis, das mit per div.addEventListener('click', eventReturner(), false); hinzugefügt wurde.

Entfernen aller Event-Handler

Wenn die Absicht darin besteht, alle Ereignishandler (unabhängig vom Typ) aus einem Element zu entfernen, ziehen Sie die folgende Methode in Betracht:

var clone = element.cloneNode(true);

Diese Technik behält Attribute und untergeordnete Elemente bei, ohne die Änderungen an DOM-Eigenschaften zu beeinträchtigen.

Anonyme Ereignishandler eines bestimmten Typs entfernen

Der alternative Ansatz besteht darin, die Methode „removeEventListener()“ zu verwenden, sie funktioniert jedoch möglicherweise nicht, wenn es um anonyme Funktionen geht. Das Hauptproblem hierbei ist, dass beim Aufruf von addEventListener mit einer anonymen Funktion bei jedem Aufruf der Funktion ein eindeutiger Listener zugewiesen wird. Folglich hat der Versuch, den Ereignishandler mithilfe derselben Funktionsreferenz zu entfernen, keine Auswirkung.

Um diese Einschränkung zu beheben, ziehen Sie diese beiden Alternativen in Betracht:

1. Verwenden Sie eine benannte Funktion:

function handler() {
     dosomething();
 }

 div.addEventListener('click',handler,false);

2. Eine Wrapper-Funktion erstellen:

var _eventHandlers = {}; // somewhere global

const addListener = (node, event, handler, capture = false) => {
   if (!(event in _eventHandlers)) {
     _eventHandlers[event] = []
   }
   _eventHandlers[event].push({ node: node, handler: handler, capture: capture })
   node.addEventListener(event, handler, capture)
 }
...
addListener(div, 'click', eventReturner(), false)

Dieser Ansatz ermöglicht die Erstellung eines Wrappers Funktion, die einen Verweis auf den hinzugefügten Ereignis-Listener speichert. Die entsprechende Funktion „removeAllListeners“ kann dann verwendet werden, um diese Handler zu entfernen.

Das obige ist der detaillierte Inhalt vonSo entfernen Sie alle Ereignis-Listener aus einem DOM-Objekt in JavaScript: Eine umfassende Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!