Gebeurtenissen loskoppelen in JavaScript

In deze les leren we hoe we gebeurtenishandlers, die eerder door ons aan elementen waren gekoppeld, kunnen loskoppelen. Stel we hebben bijvoorbeeld de volgende knop:

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

Laten we de functie func aan deze knop koppelen:

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

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

Laten we nu ervoor zorgen dat de gebeurtenishandler alleen bij de eerste klik wordt uitgevoerd, en daarna wordt losgekoppeld van de knop. Hiervoor bestaat een speciale methode removeEventListener. Deze methode accepteert als eerste parameter het type gebeurtenis, en als tweede - een verwijzing naar de functie die moet worden losgekoppeld.

Dit betekent over het algemeen dat de gebeurtenishandler op dezelfde manier wordt losgekoppeld als hij werd gekoppeld. Dat wil zeggen, als we hem zo hebben gekoppeld: addEventListener('click', func), dan koppelen we hem ook los met dezelfde parameters, zoals hier: removeEventListener('click', func).

Laten we de door ons gestelde taak oplossen:

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

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

Gegeven een link en een knop. Voeg bij het klikken op de knop de inhoud van het attribuut href van de link toe tussen ronde haakjes aan het einde van de linktekst. Zorg ervoor dat deze toevoeging alleen bij de eerste keer klikken gebeurt.

Gegeven een knop, waarvan de waarde het getal 1 is. Zorg ervoor dat bij elke klik op deze knop de waarde met één wordt verhoogd. Nadat de waarde van de knop 10 heeft bereikt - koppel de gebeurtenishandler los, zodat de knop niet meer reageert op klikken.