Fjerning av event listeners i JavaScript

I denne leksjonen vil vi lære hvordan vi fjerner event handlers som tidligere er blitt koblet til elementer. La oss for eksempel ha følgende knapp:

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

La oss koble funksjonen func til denne knappen:

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

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

La oss nå gjøre slik at event handleren utløses på det første klikket, og deretter fjernes fra knappen. For dette finnes det en spesiell metode removeEventListener. Denne metoden tar førsteparameteren som type event, og andreparameteren som en referanse til funksjonen som skal fjernes.

Som regel betyr dette at event handleren fjernes på samme måte som den ble koblet til. Det vil si, hvis vi koblet den til slik: addEventListener('click', func), så fjerner vi den med de samme parameterne, slik: removeEventListener('click', func).

Så, la oss løse oppgaven vi har satt oss:

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

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

Det er gitt en lenke og en knapp. Ved klikk på knappen, legg til innholdet fra dens href-attributt i slutten av lenketeksten i parentes. Gjør slik at dette tillegget kun skjer ved første klikk.

Det er gitt en knapp, med verdien 1. Gjør slik at ved klikk på denne knappen økes verdien med én hver gang. Etter at knappens verdi når 10 - fjern event handleren så knappen ikke lenger reagerer på klikk.