Објекат 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. Направите тако да при клику на ово дугме његова вредност сваки пут увећа за један.