Odvajanje dogodkov v JavaScript

V tej lekciji se bomo naučili odvajati upravljavce dogodkov, ki smo jih prej povezali z elementi. Za primer naj bo podan naslednji gumb:

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

Povežimo s tem gumbom funkcijo func:

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

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

Naredimo zdaj tako, da se upravljavec dogodka sproži ob prvem kliku, nato pa se odveže od gumba. Za to obstaja posebna metoda removeEventListener. Ta metoda sprejme kot prvi parameter tip dogodka, kot drugega pa sklic na funkcijo, ki jo je treba odvezati.

Praviloma to pomeni, da se upravljavec dogodka odveže na enak način, kot je bil vezan. To pomeni, če smo ga vezali takole: addEventListener('click', func), ga bomo tudi odvezali z enakimi parametri, takole: removeEventListener('click', func).

Torej, rešimo zastavljeno nalogo:

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

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

Podana je povezava in gumb. Ob kliku na gumb dodajte na konec besedila povezave vsebino njenega atributa href v okroglih oklepajih. Naredite tako, da se to dodajanje zgodi le ob prvem kliku.

Podan je gumb, katerega vrednost je število 1. Naredite tako, da se ob kliku na ta gumb njena vrednost vsakič poveča za ena. Ko vrednost gumba doseže 10 - odvpnite upravljavec dogodka, da gumb ne bo več reagiral na pritisk.