# Объект 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`. Сделайте так, чтобы по клику на эту кнопку ее значение каждый раз увеличивалось на единицу.

←→
↑
en ru