DieremoveEventListener() Methode derEventTarget Schnittstelle entfernt einen zuvor mitEventTarget.addEventListener() registrierten Ereignis-Listener vom Ziel. Der zu entfernende Event-Listener wird durch eine Kombination aus Event-Typ, der Event-Listener-Funktion selbst und verschiedenen optionalen Optionen, die den Abgleichprozess beeinflussen können, identifiziert; sieheAbgleich von Event-Listenern zur Entfernung.

Ein Aufruf vonremoveEventListener() mit Argumenten, die keinen aktuell registriertenEvent-Listener auf demEventTarget identifizieren, hat keine Auswirkung.

Wenn einEvent-Listener von einemEventTarget entfernt wird, während ein anderer Listener des Ziels ein Ereignis verarbeitet, wird er nicht durch das Ereignis ausgelöst. Allerdings kann er wieder angefügt werden.

Event-Listener können auch entfernt werden, indem einAbortSignal anaddEventListener() übergeben wird und anschließendabort() auf dem Controller, der das Signal besitzt, aufgerufen wird.

Syntax

removeEventListener(type, listener)removeEventListener(type, listener, options)removeEventListener(type, listener, useCapture)

Parameter

type

Ein String, der den Typ des Ereignisses angibt, für das ein Event-Listener entfernt werden soll.

listener

DieEvent-Listener Funktion des Event-Handlers, der vomEvent-Target entfernt werden soll.

optionsOptional

Ein Optionsobjekt, das Eigenschaften über den Event-Listener angibt.

Die verfügbaren Optionen sind:

• capture: Ein boolescher Wert, der angibt, ob derEvent-Listener, der entfernt werden soll, als Capturing-Listener registriert ist oder nicht. Wird dieser Parameter nicht übergeben, wird der Standardwertfalse angenommen.

useCaptureOptional

Ein boolescher Wert, der angibt, ob derEvent-Listener, der entfernt werden soll, als Capturing-Listener registriert ist oder nicht. Wird dieser Parameter nicht übergeben, wird der Standardwertfalse angenommen.

Rückgabewert

Keiner.

Abgleich von Event-Listenern zur Entfernung

Wenn ein Event-Listener zuvor durch den Aufruf vonaddEventListener() hinzugefügt wurde, kann es irgendwannnotwendig werden, ihn zu entfernen. Offensichtlich müssen Sie die gleichentype undlistener Parameter anremoveEventListener() übergeben. Aber was ist mit den ParameternoptionsoderuseCapture?

WährendaddEventListener() es erlaubt, denselben Listener mehr als einmalfür denselben Typ hinzuzufügen, wenn die Optionen unterschiedlich sind, überprüftremoveEventListener() nur diecapture/useCapture-Flag. Sein Wert mussübereinstimmen, damitremoveEventListener() übereinstimmt, aber die anderen Werte nicht.

Zum Beispiel, betrachten Sie diesen Aufruf vonaddEventListener():

element.addEventListener("mousedown", handleMouseDown, true);

Betrachten Sie nun jeden dieser zwei Aufrufe vonremoveEventListener():

element.removeEventListener("mousedown", handleMouseDown, false); // Failselement.removeEventListener("mousedown", handleMouseDown, true); // Succeeds

Der erste Aufruf schlägt fehl, da der Wert vonuseCapture nicht übereinstimmt.Der zweite ist erfolgreich, dauseCapture übereinstimmt.

Betrachten Sie nun dies:

element.addEventListener("mousedown", handleMouseDown, { passive: true });

Hier geben wir einoptions Objekt an, in dempassive auftrue gesetzt ist, während die anderen Optionen auf denStandardwertfalse gesetzt sind.

Sehen Sie sich nun jeden dieser Aufrufe vonremoveEventListener() der Reihe nach an. Jeder Aufruf, bei demcapture oderuseCapturetrue ist, schlägt fehl; alle anderen sind erfolgreich.

Nur diecapture-Einstellung ist fürremoveEventListener() von Bedeutung.

element.removeEventListener("mousedown", handleMouseDown, { passive: true }); // Succeedselement.removeEventListener("mousedown", handleMouseDown, { capture: false }); // Succeedselement.removeEventListener("mousedown", handleMouseDown, { capture: true }); // Failselement.removeEventListener("mousedown", handleMouseDown, { passive: false }); // Succeedselement.removeEventListener("mousedown", handleMouseDown, false); // Succeedselement.removeEventListener("mousedown", handleMouseDown, true); // Fails

Es sei darauf hingewiesen, dass einige Browserversionen hier inkonsistent gewesen sind, und es sei geraten, die gleichen Werte wie beimAufruf vonaddEventListener() zu verwenden, wenn SieremoveEventListener() aufrufen, es sei denn, Sie haben spezifische Gründe, es anders zu machen.

Beispiel

Dieses Beispiel zeigt, wie man einen aufmouseover basierenden Event-Listener hinzufügt, der einen aufclick basierenden Event-Listener entfernt.

const body = document.querySelector("body");const clickTarget = document.getElementById("click-target");const mouseOverTarget = document.getElementById("mouse-over-target");let toggle = false;function makeBackgroundYellow() {  body.style.backgroundColor = toggle ? "white" : "yellow";  toggle = !toggle;}clickTarget.addEventListener("click", makeBackgroundYellow);mouseOverTarget.addEventListener("mouseover", () => {  clickTarget.removeEventListener("click", makeBackgroundYellow);});

Spezifikationen

Browser-Kompatibilität

Siehe auch

• EventTarget.addEventListener()