Afkobling af events i JavaScript

I denne lektion vil vi lære at afkoble event handlers, som tidligere blev tilknyttet af os til elementer. Lad som eksempel følgende knap være givet:

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

Lad os tilknytte funktionen func til denne knap:

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

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

Lad os nu gøre sådan, at event handleren udløses ved det første klik, og derefter bliver afkoblet fra knappen. Til dette findes der en speciel metode removeEventListener. Denne metode tager som første parameter typen af eventet, og som andet - en reference til funktionen, som skal afkobles.

Som regel betyder det, at event handleren afkobles på samme måde, som den blev tilknyttet. Det vil sige, hvis vi tilknyttede den sådan her: addEventListener('click', func), så afkobler vi den også med de samme parametre, sådan her: removeEventListener('click', func).

Så lad os løse den opgave, vi har stillet:

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

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

Der gives et link og en knap. Ved klik på knappen skal du tilføje indholdet af linkets href attribut til slutningen af linkets tekst i runde parenteser. Gør sådan, at denne tilføjelse kun sker ved det første tryk.

Der gives en knap, hvis værdi er tallet 1. Gør sådan, at ved klik på denne knap øges dens værdi hver gang med én. Efter at knappens værdi når 10 - afkobl event handleren, så knappen ikke længere reagerer på tryk.