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

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

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

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

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

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

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

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

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

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

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

Дадена е връзка и бутон. При натискане на бутона добавете в края на текста на връзката съдържанието на нейния атрибут href в кръгли скоби. Направете така, че това добавяне да се случва само при първото натискане.

Даден е бутон, чиято стойност е число 1. Направете така, че при кликване върху този бутон стойността му всеки път да се увеличава с единица. След като стойността на бутона достигне 10 - откачете обработващата функция на събитието, така че бутонът вече да не реагира на натискане.