Entkoppeln von Ereignissen in JavaScript

In dieser Lektion lernen wir, wie man Ereignishandler, die wir zuvor an Elemente gebunden haben, wieder entkoppelt. Nehmen wir als Beispiel den folgenden Button:

html<input id="button" type="submit">

Binden wir die Funktion func an diesen Button:

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
  console.log('!!!');
}

Lassen Sie uns nun erreichen, dass der Ereignishandler beim ersten Klick ausgelöst wird und sich danach vom Button entkoppelt. Dafür gibt es eine spezielle Methode removeEventListener. Diese Methode nimmt als ersten Parameter den Typ des Ereignisses und als zweiten Parameter eine Referenz auf die Funktion, die entkoppelt werden soll.

In der Regel bedeutet dies, dass der Ereignishandler genauso entkoppelt wird, wie er gebunden wurde. Das heißt, wenn wir ihn so gebunden haben: addEventListener('click', func), dann entkoppeln wir ihn auch mit denselben Parametern, so: removeEventListener('click', func).

Lösen wir also die von uns gestellte Aufgabe:

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
  console.log('!!!');
  this.removeEventListener('click', func);
}