Odłączanie zdarzeń w JavaScript

W tej lekcji nauczymy się odłączać handlery zdarzeń, które wcześniej zostały podpięte przez nas do elementów. Niech dla przykładu będzie dany następujący przycisk:

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

Podepnijmy do tego przycisku funkcję func:

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

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

Zróbmy teraz tak, aby handler zdarzenia uruchamiał się przy pierwszym kliknięciu, a potem odłączył się od przycisku. Do tego istnieje specjalna metoda removeEventListener. Ta metoda przyjmuje jako pierwszy parametr typ zdarzenia, a jako drugi - odnośnik do funkcji, którą trzeba odłączyć.

Z reguły oznacza to, że handler zdarzenia jest odłączany tak samo, jak był podpinany. To znaczy, jeśli podpięliśmy go w ten sposób: addEventListener('click', func), to i odłączymy z tymi samymi parametrami, w ten sposób: removeEventListener('click', func).

A zatem, rozwiążmy postawione przez nas zadanie:

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

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

Dany jest link i przycisk. Po naciśnięciu przycisku dodaj na końcu tekstu linku zawartość jego atrybutu href w okrągłych nawiasach. Zrób tak, aby to dodawanie odbywało się tylko przy pierwszym naciśnięciu.

Dany jest przycisk, którego wartością jest liczba 1. Zrób tak, aby po kliknięciu na ten przycisk jego wartość za każdym razem zwiększała się o jeden. Po tym, jak wartość przycisku osiągnie 10 - odłącz handler zdarzenia, aby przycisk już nie reagował na naciśnięcie.