Откачане на събития в JavaScript

В този урок ще се научим как да откачаме обработващи функции на събития, които преди това са били прикачени от нас към елементи. Нека за пример дадем следния бутон:

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

Нека прикажем към този бутон функцията func:

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

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

Нека сега направим така, че обработващата функция на събитието да се задейства при първото кликване, а след това да се откачи от бутона. За това съществува специален метод removeEventListener. Този метод приема като първи параметър типа на събитието, а като втори - препратка към функцията, която трябва да се откачи.

По правило това означава, че обработващата функция на събитието се откача по същия начин, по който е била прикачена. Тоест, ако сме я прикачили ето така: addEventListener('click', func), то и ще я откачим със същите параметри, ето така: removeEventListener('click', func).

И така, нека решим поставената от нас задача:

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

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