Események leválasztása JavaScriptben

Ebben a leckében megtanuljuk, hogyan választhatunk le eseménykezelőket, amelyeket korábban elemekhez kötöttünk meg. Legyen példaként a következő gomb adott:

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

Kössük ehhez a gombhoz a func függvényt:

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

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

Tegyük most azt, hogy az eseménykezelő az első kattintáskor aktiválódjon, majd utána váljon le a gombról. Erre egy különleges removeEventListener metódus szolgál. Ez a metódus első paraméterként az esemény típusát, második paraméterként pedig a leváltandó függvényre mutató hivatkozást fogadja.

Általában ez azt jelenti, hogy az eseménykezelő ugyanúgy válik le, ahogyan megkötésre került. Vagyis, ha így kötöttük meg: addEventListener('click', func), akkor ugyanezekkel a paraméterekkel fogjuk le is választani, így: removeEventListener('click', func).

Tehát oldjuk meg a magunk elé állított feladatot:

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

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