Wie kann ich Ereignis-Listener aus DOM-Objekten in JavaScript entfernen?

Ereignis-Listener aus DOM-Objekten entfernen

Alle Ereignis-Handler entfernen

Um alle Ereignis-Handler von einem Objekt zu entfernen, können Sie das Element klonen und ersetzen es mit dem Klon:

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

Diese Methode behält Attribute und untergeordnete Elemente bei, ändert jedoch nicht die DOM-Eigenschaften.

Ereignishandler mit anonymen Funktionen entfernen

Sie können Ereignisse entfernen Handler mit anonymen Funktionen, indem Sie einen Verweis auf die zurückgegebene Funktion speichern und eine separate Funktion zum Entfernen aller Ereignisse erstellen:

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

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

const removeAllListeners = (targetNode, event) => {
  _eventHandlers[event]
    .filter(({ node }) => node === targetNode)
    .forEach(({ node, handler, capture }) => node.removeEventListener(event, handler, capture))

  _eventHandlers[event] = _eventHandlers[event].filter(
    ({ node }) => node !== targetNode,
  )
}</code>

Damit können Sie Ereignis-Listener hinzufügen und entfernen mit:

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

Direkte Ereignisverarbeitung

Wenn Sie eine anonyme Funktion zur Verarbeitung von Ereignissen verwenden, können Sie diese einfach direkt hinzufügen und entfernen:

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

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

Das obige ist der detaillierte Inhalt vonWie kann ich Ereignis-Listener aus DOM-Objekten in JavaScript entfernen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!