EventTarget: removeEventListener() Methode

type

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

listener

Die Ereignis-Listener-Funktion des zu entfernenden Ereignis-Handlers vom Ereignis-Ziel.

options Optional

Ein Optionsobjekt, das Merkmale des Ereignis-Listners angibt.

Die verfügbaren Optionen sind:

• capture: Ein boolescher Wert, der angibt, ob der zu entfernende Ereignis-Listener als Capturing-Listener registriert ist oder nicht. Wenn dieser Parameter nicht vorhanden ist, wird der Standardwert false angenommen.

useCapture Optional

Ein boolescher Wert, der angibt, ob der zu entfernende Ereignis-Listener als Capturing-Listener registriert ist oder nicht. Wenn dieser Parameter nicht vorhanden ist, wird der Standardwert false angenommen.

Keiner.

Angenommen, Sie haben einen Ereignis-Listener hinzugefügt, indem Sie addEventListener() aufgerufen haben, und möchten ihn schließlich entfernen. Offensichtlich müssen Sie die gleichen type- und listener-Parameter für removeEventListener() angeben. Aber was ist mit den Parametern options oder useCapture?

Auch wenn addEventListener() es Ihnen ermöglicht, denselben Listener mehrmals für denselben Typ hinzuzufügen, wenn die Optionen unterschiedlich sind, überprüft removeEventListener() nur das capture/useCapture-Flag. Sein Wert muss übereinstimmen, damit removeEventListener() übereinstimmt, aber die anderen Werte nicht.

Beispielsweise betrachten Sie diesen Aufruf von addEventListener():

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

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

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

Der erste Aufruf schlägt fehl, weil der Wert von useCapture nicht übereinstimmt. Der zweite gelingt, da useCapture übereinstimmt.

Nun betrachten Sie dies:

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

Hier geben wir ein options-Objekt an, bei dem passive auf true gesetzt ist, während die anderen Optionen auf den Standardwert false gesetzt bleiben.

Schauen Sie sich nun jeden dieser Aufrufe von removeEventListener() an. Jeder Aufruf, bei dem capture oder useCapture auf true gesetzt ist, schlägt fehl; alle anderen gelingen.

Nur die Einstellung capture ist wichtig für removeEventListener().

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 ist erwähnenswert, dass einige Browser-Versionen hier inkonsistent waren, und es ist wahrscheinlich klug, die gleichen Werte wie für den Aufruf von addEventListener() zu verwenden, wenn Sie removeEventListener() aufrufen, sofern Sie keine spezifischen Gründe dafür haben.

Dieses Beispiel zeigt, wie ein mouseover-basierter Ereignis-Listener hinzugefügt wird, der einen click-basierten Ereignis-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, false);

mouseOverTarget.addEventListener("mouseover", () => {
  clickTarget.removeEventListener("click", makeBackgroundYellow, false);
});

• EventTarget.addEventListener()