Wie entfernt man einen Ereignis-Listener?

Um Ereignis-Handler wird mit der Methode removeEventListener() entfernt. Diese Methode akzeptiert die gleichen drei Argumente wie addEventListener():

1. Ereignistyp (Zeichenkette, z.B. 'click', 'mouseover').
2. Referenz auf die Handler-Funktion, die zugewiesen wurde.
3. Optionales Objekt oder boolescher Wert, der die Phase angibt (Capturing oder Bubbling). Muss mit dem bei der Hinzufügung verwendeten Wert übereinstimmen.

Wichtig: Um erfolgreich zu entfernen, muss genau die gleiche Funktionsreferenz übergeben werden, die beim Hinzufügen verwendet wurde. Anonyme Funktionen, die "im Flug" erstellt wurden, können auf diese Weise nicht entfernt werden.

Beispiel:

// Element holen
const element = document.getElementById('myButton');

// Handler-Funktion definieren
function handleClick() {
  console.log('Knopf gedrückt!');
}

// Handler hinzufügen
element.addEventListener('click', handleClick);

// ...Code...

// Handler entfernen
element.removeEventListener('click', handleClick);

Wenn der Handler mit Optionen hinzugefügt wurde, z.B. useCapture: true, müssen diese auch bei der Entfernung angegeben werden:

element.addEventListener('click', handleClick, { capture: true });

// ...

element.removeEventListener('click', handleClick, { capture: true });

Wenn beim Hinzufügen das dritte Argument weggelassen wurde (Standardwert false), kann es auch bei der Entfernung weggelassen oder explizit auf false gesetzt werden:

element.addEventListener('click', handleClick); // useCapture: false standardmäßig

// ...

element.removeEventListener('click', handleClick);
element.removeEventListener('click', handleClick, false); // entspricht dem oben