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:

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

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

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

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

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

Adott egy link és egy gomb. A gomb megnyomására adjon hozzá a link szövegéhez a végére annak href attribútumának tartalmát kerek zárójelek között. Ügyeljen arra, hogy ez a hozzáadás csak az első megnyomáskor történjen meg.

Adott egy gomb, melynek értéke a 1 szám. Tegye meg, hogy a gombra kattintva annak értéke minden alkalommal eggyel növekedjen. Miután a gomb értéke eléri a 10-et - válassza le az eseménykezelőt, hogy a gomb többé ne reagáljon a megnyomásra.