Odvajanje događaja u JavaScript-u

U ovoj lekciji ćemo naučiti kako da odvojimo rukovaoce događaja koji su ranije bili povezani sa elementima. Na primer, neka je data sledeće dugme:

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

Povežimo funkciju func sa ovim dugmetom:

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

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

Hajde sada da učinimo tako da rukovalac događaja bude aktiviran na prvi klik, a zatim da se odvoji od dugmeta. Za to postoji specijalna metoda removeEventListener. Ova metoda kao prvi parametar prima tip događaja, a kao drugi - referencu na funkciju koju treba odvojiti.

Obično to znači da se rukovalac događaja odvaja na isti način na koji je i bio povezan. To jest, ako smo ga povezali ovako: addEventListener('click', func), onda ćemo ga i odvojiti sa istim parametrima, ovako: removeEventListener('click', func).

Dakle, rešimo zadat koji smo postavili:

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

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

Data su link i dugme. Klikom na dugme dodajte na kraj teksta linka sadržaj njegovog atributa href u oblim zagradama. Učinite tako da se ovo dodavanje dešava samo pri prvom kliku.

Data je dugme, čija je vrednost broj 1. Učinite tako da pri kliku na ovo dugme njegova vrednost svaki put povećava za jedan. Nakon što vrednost dugmeta dostigne 10 - odvojite rukovaoca događaja, tako da dugme više ne reaguje na pritisak.