Обект this в JavaScript

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

Обектът this е удобен, когато елементът, в който е възникнало събитието, и елементът, с който се извършват действия в резултат на събитието, са един и същи елемент.

Например, ако имаме input, можем да свържем към него обработчик на загуба на фокус и при настъпване на това събитие да направим нещо с текста в input. Нека направим описаното. Да предположим, че имаме input:

<input id="elem" value="text">

Нека получим препратка към него в променлива elem:

let elem = document.querySelector('#elem');

Нека свържем към него функция-обработчик на събитието blur:

elem.addEventListener('blur', func);

Вътре в тази функция func ще бъде достъпен обектът this, сочещ към нашия input:

function func() {
	console.log(this); // съдържа препратка към нашия елемент
}

Нека изведем съдържанието на атрибута value на нашия input:

function func() {
	console.log(this.value); // ще изведем съдържанието на атрибута
}

Е, а сега нека запишем в input някакъв текст:

function func() {
	this.value = '!!!';
}

Може да се използва и анонимна функция:

elem.addEventListener('blur', function() {
	this.value = '!!!';
});

Даден е input. При получаване на фокус от този input запишете в него числото 1, а при загуба на фокус - числото 2. За обръщение към input във функция-обработчик използвайте обекта this.

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