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:

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

Pripojme k tomuto tlačidlu funkciu func:

javascriptlet 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:

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

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