Объект this в JavaScript

Сейчас мы будем работать со специальным объектом this, доступным в функции-обработчике события. Этот объект указывает на элемент, в котором произошло событие.

Объект this удобен, когда элемент, в котором произошло событие, и элемент, с которым совершаются действия в результате события, - это один и тот же элемент.

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

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

Давайте получим ссылку на него в переменную elem:

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

Привяжем к нему функцию-обработчик события blur:

elem.addEventListener('blur', func);

Внутри этой функции func будет доступен объект this, указывающий на наш инпут:

function func() {
	console.log(this); // содержит ссылку на наш элемент
}

Выведем содержимое атрибута value нашего инпута:

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

Ну, а теперь запишем в инпут какой-нибудь текст:

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

Можно использовать и анонимную функцию:

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

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

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