Отвязывание событий через removeEventListener

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

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

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

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

function func() {
	alert('!!!');
}

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

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

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

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

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

Дана ссылка. По нажатию на эту ссылку добавьте в конец ее текста содержимое ее атрибута href в круглых скобках. Сделайте так, чтобы это добавление происходило лишь по первому нажатию.

Дана кнопка, значением которой служит число 1. Сделайте так, чтобы по клику на эту кнопку ее значение каждый раз увеличивалось на единицу. После того, как значение кнопки достигнет 10 - отвяжите обработчик события, чтобы кнопка больше не реагировала на нажатие.