Obiekt this w JavaScript

Teraz będziemy pracować ze specjalnym obiektem this, dostępnym w funkcji-obsłudze zdarzenia. Ten obiekt wskazuje na element, w którym wystąpiło zdarzenie.

Obiekt this jest wygodny, gdy element, w którym wystąpiło zdarzenie, i element, z którym są wykonywane działania w wyniku zdarzenia, to ten sam element.

Na przykład, jeśli mamy input, możemy przypisać do niego obsługę utraty fokusu i po wystąpieniu tego zdarzenia coś zrobić z tekstem inputa. Zróbmy to, co opisano. Załóżmy, że mamy input:

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

Pobierzmy referencję do niego do zmiennej elem:

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

Przypiszmy do niego funkcję-obsługę zdarzenia blur:

elem.addEventListener('blur', func);

Wewnątrz tej funkcji func będzie dostępny obiekt this, wskazujący na nasz input:

function func() {
	console.log(this); // zawiera referencję do naszego elementu
}

Wypiszmy zawartość atrybutu value naszego inputa:

function func() {
	console.log(this.value); // wypiszemy zawartość atrybutu
}

A teraz zapiszmy w inputzie jakiś tekst:

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

Można użyć również funkcji anonimowej:

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

Dany jest input. Po uzyskaniu fokusu przez ten input wpisz w niego liczbę 1, a po utracie fokusu - liczbę 2. Aby odwołać się do inputa wewnątrz funkcji-obsługi użyj obiektu this.

Dany jest przycisk, którego wartością jest liczba 1. Spraw, aby po kliknięciu na ten przycisk jego wartość za każdym razem zwiększała się o jeden.