JavaScript/DOM/EventTarget/removeEventListener

Die Methode EventTarget.removeEventListener() entfernt einen Event-Handler, der mit der addEventListener-Methode hinzufügt wurde.

Syntax target.removeEventListener(type, listener[, useCapture]);

• type: String mit dem Ereignistyp
• listener: Handler-Funktion
• useCapture: optionaler Boolean-Wert für die Event-Phase.

Anwendungsbeispiel

Beispiel ansehen …

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('buehne').addEventListener('mousemove', holeKoordinaten);
  document.getElementById('entferne').addEventListener('click', entferneHandler);	
  
  
  function entferneHandler() {
    document.getElementById('buehne').removeEventListener('mousemove', holeKoordinaten);
  }
 
  function holeKoordinaten(e) {
    x = e.clientX;
    y = e.clientY;
    document.getElementById('x').innerHTML = x;
    document.getElementById('y').innerHTML = y;
  }
  
});

Das main-Element im Beispiel hat einen mousemove-EventHandler, der die Position der Maus innerhalb des Elements anzeigt. Ein Klick auf den Button entfernt den EventHandler.

Beachten Sie: Um Event-Handler zu entfernen, müssen die zuvor mit addEventListener hinzugefügten Funktionen externe Funktionen sein. Anonyme Funktionen wie element.removeEventListener("event", function(){ meinScript }); können nicht entfernt werden.

UseCapture / EventListenerOptions

Wird ein Eventhandler für die Capturing-Phase registriert, muss das auch bei der Deregistrierung angegeben werden. Der dritte Parameter von addEventListener muss in gleicher Form an removeEventListener übergeben werden.

Siehe auch

• JavaScript/Tutorials/DOM/Ereignisverarbeitung: Event-Handler entfernen: removeEventListener
• JavaScript/DOM/Event: Beendigung der Ereignisüberwachung (removeEventListener)

Weblinks

• W3C: removeEventListener
• MDN: EventTarget.removeEventListener()
• fortgeschrittenes Event-Handling (von Mathias Schäfer)