Одврзување на настани во 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 - одврзете го обработувачот на настанот, така што копчето повеќе да не реагира на притискање.