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:

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

Povežimo s tem gumbom funkcijo func:

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

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

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