Объект this в JavaScript

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

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

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

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

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

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

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

javascriptelem.addEventListener('blur', func);

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

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

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

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

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

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

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

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