Avregistrering av händelser i JavaScript

I den här lektionen kommer vi att lära oss att avregistrera händelsehanterare som tidigare har registrerats på element. Låt oss som exempel ta följande knapp:

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

Låt oss koppla funktionen func till denna knapp:

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

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

Låt oss nu göra så att händelsehanteraren utlöses vid första klicket och sedan avregistreras från knappen. För detta finns en speciell metod removeEventListener. Denna metod tar först en parameter för händelsetypen och sedan en referens till funktionen som skall avregistreras.

Generellt innebär detta att händelsehanteraren avregistreras på samma sätt som den registrerades. Det betyder att om vi registrerade den så här: addEventListener('click', func), så avregistrerar vi den med samma parametrar, så här: removeEventListener('click', func).

Så, låt oss lösa uppgiften vi ställt oss:

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

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

En länk och en knapp ges. Vid klick på knappen, lägg till innehållet i länkens attribut href i parentes i slutet av länktexten. Gör så att detta tillägg endast sker vid det första klicket.

En knapp ges, vars värde är talet 1. Gör så att vid varje klick på denna knapp ökar dess värde med ett. Efter att knappens värde har nått 10 - avregistrera händelsehanteraren så att knappen inte längre reagerar på klick.