EventTarget: Methode removeEventListener()

Syntax

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

Parameter

type

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

listener

Die Event-Listener Funktion des Event-Handlers, der vom Event-Target entfernt werden soll.

options Optional

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

Die verfgbaren Optionen sind:

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

useCapture Optional

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

Rckgabewert

Keiner.

Abgleich von Event-Listenern zur Entfernung

Wenn ein Event-Listener zuvor durch den Aufruf von addEventListener() hinzugefgt wurde, kann es irgendwann notwendig werden, ihn zu entfernen. Offensichtlich mssen Sie die gleichen type und listener Parameter an removeEventListener() bergeben. Aber was ist mit den Parametern options oder useCapture?

Whrend addEventListener() es erlaubt, denselben Listener mehr als einmal fr denselben Typ hinzuzufgen, wenn die Optionen unterschiedlich sind, berprft removeEventListener() nur die capture/useCapture-Flag. Sein Wert muss bereinstimmen, damit removeEventListener() bereinstimmt, aber die anderen Werte nicht.

Zum Beispiel, betrachten Sie diesen Aufruf von addEventListener():

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

Betrachten Sie nun jeden dieser zwei Aufrufe von removeEventListener():

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

Der erste Aufruf schlgt fehl, da der Wert von useCapture nicht bereinstimmt. Der zweite ist erfolgreich, da useCapture bereinstimmt.

Betrachten Sie nun dies:

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

Hier geben wir ein options Objekt an, in dem passive auf true gesetzt ist, whrend die anderen Optionen auf den Standardwert false gesetzt sind.

Sehen Sie sich nun jeden dieser Aufrufe von removeEventListener() der Reihe nach an. Jeder Aufruf, bei dem capture oder useCapture true ist, schlgt fehl; alle anderen sind erfolgreich.

Nur die capture-Einstellung ist fr removeEventListener() von Bedeutung.

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

Es sei darauf hingewiesen, dass einige Browserversionen hier inkonsistent gewesen sind, und es sei geraten, die gleichen Werte wie beim Aufruf von addEventListener() zu verwenden, wenn Sie removeEventListener() aufrufen, es sei denn, Sie haben spezifische Grnde, es anders zu machen.

Beispiel

Dieses Beispiel zeigt, wie man einen auf mouseover basierenden Event-Listener hinzufgt, der einen auf click 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-Kompatibilitt

Siehe auch

• EventTarget.addEventListener()