Odpájanie udalostí v JavaScripte

V tejto lekcii sa naučíme odpájať obsluhy udalostí, ktoré boli predtým pripojené nami k elementom. Nech je pre príklad daný nasledujúci tlačidlo:

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

Pripojme k tomuto tlačidlu funkciu func:

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

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

Urobme teraz tak, aby obsluha udalosti bola spustená na prvý klik, a potom sa odpojila od tlačidla. Na to existuje špeciálna metóda removeEventListener. Táto metóda ako prvý parameter prijíma typ udalosti, a ako druhý - odkaz na funkciu, ktorú treba odpojiť.

Spravidla to znamená, že obsluha udalosti sa odpojí tak, ako bola pripojená. To znamená, že ak sme ju pripojili takto: addEventListener('click', func), tak aj odpojíme s rovnakými parametrami, takto: removeEventListener('click', func).

Takže, vyriešme zadanú úlohu:

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

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

Daný odkaz a tlačidlo. Kliknutím na tlačidlo pridajte na koniec textu odkazu obsah jeho atribútu href v okrúhlych zátvorkách. Urobte tak, aby toto pridanie prebehlo iba pri prvom kliknutí.

Dané tlačidlo, ktorého hodnotou je číslo 1. Urobte tak, aby pri kliknutí na toto tlačidlo sa jeho hodnota zakaždým zvýšila o jednotku. Potom, čo hodnota tlačidla dosiahne 10 - odpojte obsluhu udalosti, aby tlačidlo už nereagovalo na kliknutie.