Objekat this u JavaScriptu

Sada ćemo raditi sa posebnim objektom this, dostupnim u funkciji-rukovaocu događaja. Ovaj objekat ukazuje na element u kojem se događaj desio.

Objekt this je zgodan kada su element, u kojem se događaj desio, i element, sa kojim se preduzimaju akcije kao rezultat događaja, - to isti onaj element.

Na primer, ako imamo input, možemo da mu vezujemo rukovaoca gubljenja fokusa i po nastupanju tog događaja nešto uradimo sa tekstom inputa. Hajde da uradimo opisano. Neka nam je dat input:

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

Hajde da dobijemo referencu na njega u promenljivu elem:

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

Vezujmo za njega funkciju-rukovaoca događaja blur:

elem.addEventListener('blur', func);

Unutar ove funkcije func biće dostupan objekat this, koji ukazuje na naš input:

function func() {
	console.log(this); // sadrži referencu na naš element
}

Ispišimo sadržaj atributa value našeg inputa:

function func() {
	console.log(this.value); // ispisaćemo sadržaj atributa
}

Pa, a sada upišimo u input neki tekst:

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

Može se koristiti i anonimna funkcija:

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

Dat je input. Po dobijanju fokusa ovim inputom zapišite u njega broj 1, a po gubljenju fokusa - broj 2. Za pristup inputu unutar funkcije-rukovaoca koristite objekat this.

Data je dugme, čija vrednost služi kao broj 1. Učinite tako da po kliku na ovo dugme njegova vrednost svaki put povećava za jedan.