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:

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

Pobierzmy referencję do niego do zmiennej elem:

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

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

javascriptelem.addEventListener('blur', func);

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

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

Wypiszmy zawartość atrybutu value naszego inputa:

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

A teraz zapiszmy w inputzie jakiś tekst:

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

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

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