Wie entferne ich alle Event-Handler von einem DOM-Objekt in JavaScript?

Javascript/DOM: Alle Event-Handler aus einem DOM-Objekt entfernen

Frage:

Wie können wir alle vollständig entfernen? Ereignisse, die mit einem DOM-Objekt wie einem Div verknüpft sind?

Problemausarbeitung:

In Ihrem Fall fügen Sie Ereignisse zu einem Div hinzu, indem Sie addEventListener mit einer benutzerdefinierten Funktion verwenden Funktion eventReturner(), die eine Wrapper-Funktion zurückgibt. Dadurch werden jedes Mal einzigartige Ereignis-Listener erstellt.

Lösung:

Es gibt zwei Hauptansätze zum Entfernen aller Ereignishandler aus einem DOM-Objekt:

1 . Klonen des Elements

Dieser Ansatz behält Attribute und untergeordnete Elemente bei, behält jedoch keine Änderungen an DOM-Eigenschaften bei.

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

2. Entfernen bestimmter Event-Handler

Anonyme Event-Handler:

Anonyme Funktionen, die als Event-Handler verwendet werden, erstellen wiederholt neue Listener. RemoveEventListener hat keine Auswirkung auf sie. Um dieses Problem zu beheben:

• Verwenden Sie den Funktionshandler direkt, ohne ihn zu verpacken.
• Erstellen Sie eine Wrapper-Funktion für addEventListener, die zurückgegebene Funktionen verfolgt und RemoveAllEvents unterstützt.

Beispiel-Wrapper:

<code class="javascript">var _eventHandlers = {}; // Global reference

const addListener = (node, event, handler, capture = false) => {
  if (!(event in _eventHandlers)) {
    _eventHandlers[event] = [];
  }
  _eventHandlers[event].push({ node, handler, capture });
  node.addEventListener(event, handler, capture);
};

const removeAllListeners = (targetNode, event) => {
  _eventHandlers[event] = _eventHandlers[event].filter(({ node }) => node !== targetNode);
  targetNode.removeEventListener(event, handler, capture);
};</code>

Verwendung:

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

// To remove the event listeners:
removeAllListeners(div, 'click');</code>

Hinweis: Wenn Ihr Code für eine ausgeführt wird Wenn sich dies über einen längeren Zeitraum erstreckt und viele Elemente erstellt und entfernt werden müssen, stellen Sie sicher, dass Sie alle Verweise auf diese Elemente aus _eventHandlers entfernen.

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