Objekt this v JavaScript

Nyní budeme pracovat se speciálním objektem this, dostupným v funkci-obsluze události. Tento objekt ukazuje na prvek, ve kterém došlo k události.

Objekt this je užitečný, když prvek, ve kterém došlo k události, a prvek, se kterým se provádějí akce v důsledku události, jsou jeden a tentýž prvek.

Například, pokud máme input, můžeme k němu připnout obsluhu ztráty fokusu a při nastání této události něco udělat s textem inputu. Pojďme udělat popsané. Nechť je nám dán input:

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

Pojďme získat odkaz na něj do proměnné elem:

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

Připněme k němu funkci-obsluhu události blur:

elem.addEventListener('blur', func);

Uvnitř této funkce func bude dostupný objekt this, ukazující na náš input:

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

Vypišme obsah atributu value našeho inputu:

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

Nyní zapišme do inputu nějaký text:

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

Lze použít i anonymní funkci:

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

Je dán input. Při získání fokusu tímto inputem zapište do něj číslo 1, a při ztrátě fokusu - číslo 2. Pro přístup k inputu uvnitř funkce-obsluhy použijte objekt this.

Je dáno tlačítko, jehož hodnotou je číslo 1. Zařiďte, aby při kliknutí na toto tlačítko se jeho hodnota pokaždé zvýšila o jednu.