Obiectul this în JavaScript

Acum vom lucra cu obiectul special this, disponibil în funcția-manager de eveniment. Acest obiect indică elementul în care a avut loc evenimentul.

Obiectul this este convenabil atunci când elementul, în care a avut loc evenimentul, și elementul, cu care se efectuează acțiuni ca urmare a evenimentului, sunt același element.

De exemplu, dacă avem un input, putem atașa la el un manager de pierdere a focusului și la producerea acestui eveniment să facem ceva cu textul inputului. Să facem ceea ce am descris. Să presupunem că avem un input:

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

Să obținem referința la el într-o variabilă elem:

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

Să atașăm la el o funcție-manager a evenimentului blur:

elem.addEventListener('blur', func);

În interiorul acestei funcții func va fi disponibil obiectul this, indicând spre inputul nostru:

function func() {
	console.log(this); // conține referința la elementul nostru
}

Să afișăm conținutul atributului value al inputului nostru:

function func() {
	console.log(this.value); // afișăm conținutul atributului
}

Ei bine, iar acum să scriem în input un text oarecare:

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

Putem folosi și o funcție anonimă:

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

Este dat un input. La primirea focusului de către acest input scrieți în el numărul 1, iar la pierderea focusului - numărul 2. Pentru a accesa inputul în interiorul funcției-manager folosiți obiectul this.

Este dat un buton, a cărui valoare este numărul 1. Faceți ca la click pe acest buton valoarea lui să crească de fiecare dată cu unu.