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:

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

Podepnijmy do tego przycisku funkcję func:

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

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

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