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:

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

Binden wir die Funktion func an diesen Button:

let 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:

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

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

Gegeben ist ein Link und ein Button. Beim Klick auf den Button sollen Sie den Inhalt des Attributs href in runden Klammern ans Ende des Link-Textes anhängen. Sorgen Sie dafür, dass dieses Hinzufügen nur beim ersten Klick erfolgt.

Gegeben ist ein Button, dessen Wert die Zahl 1 ist. Sorgen Sie dafür, dass bei einem Klick auf diesen Button ihr Wert jedes Mal um eins erhöht wird. Nachdem der Wert des Buttons 10 erreicht hat - entkoppeln Sie den Ereignishandler, damit der Button nicht mehr auf Klicks reagiert.