Objekt this v JavaScript

Teraz budeme pracovať so špeciálnym objektom this, dostupným v funkcii-obslužnej rutine udalosti. Tento objekt ukazuje na element, v ktorom udalosť nastala.

Objekt this je užitočný, keď element, v ktorom udalosť nastala, a element, s ktorým sa vykonávajú akcie v dôsledku udalosti, sú ten istý element.

Napríklad, ak máme input, môžeme k nemu priviazať obslužnú rutinu straty fókusu a pri nastatí tejto udalosti niečo urobiť s textom inputu. Urobme popísané. Nech je nám daný input:

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

Získajme odkaz naňho v premennej elem:

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

Priviažme k nemu funkciu-obslužnú rutinu udalosti blur:

elem.addEventListener('blur', func);

Vnútri tejto funkcie func bude dostupný objekt this, ukazujúci na náš input:

function func() {
	console.log(this); // obsahuje odkaz na náš element
}

Vypíšme obsah atribútu value nášho inputu:

function func() {
	console.log(this.value); // vypíšeme obsah atribútu
}

No, a teraz zapíšme do inputu nejaký text:

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

Môžeme použiť aj anonymnú funkciu:

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

Daný input. Pri získaní fókusu týmto inputom zapíšte do neho číslo 1, a pri strate fókusu - číslo 2. Pre prístup k inputu vnútri funkcie-obslužnej rutiny použite objekt this.

Dané tlačidlo, ktorého hodnotou je číslo 1. Urobte tak, aby pri kliknutí na toto tlačidlo sa jeho hodnota zakaždým zvýšila o jedna.