Отвязывание событий в JavaScript

В данном уроке мы научимся отвязывать обработчики события, которые ранее были привязаны нами к элементам. Пусть для примера дана следующая кнопка:

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

Привяжем к этой кнопке функцию func:

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

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

Давайте теперь сделаем так, чтобы обработчик события срабатывал на первый клик, а потом отвязывался от кнопки. Для этого существует специальный метод removeEventListener. Этот метод первым параметром принимает тип события, а вторым - ссылку на функцию, которую нужно отвязать.

Как правило, это значит, что обработчик события отвязывается так же, как и привязывался. To есть, если мы привязали его вот так: addEventListener('click', func), то и отвяжем с теми же параметрами, вот так: removeEventListener('click', func).

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

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

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