Odvazování událostí v JavaScriptu

V této lekci se naučíme odvazovat obslužné rutiny událostí, které byly dříve navázány nami na elementy. Nechť pro příklad je dáno následující tlačítko:

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

Přivažme k tomuto tlačítku funkci func:

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

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

Pojďme nyní udělat to, aby obslužná rutina události reagovala na první kliknutí, a poté se odvázala od tlačítka. K tomu existuje speciální metoda removeEventListener. Tato metoda přijímá jako první parametr typ události a jako druhý - odkaz na funkci, kterou je třeba odvázat.

Zpravidla to znamená, že obslužná rutina události se odvazuje stejně, jako byla navázána. To znamená, že pokud jsme ji navázali takto: addEventListener('click', func), pak ji také odvážeme se stejnými parametry, takto: removeEventListener('click', func).

Takže, vyřešme zadaný úkol:

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

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