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:

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

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

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

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

javascriptelem.addEventListener('blur', func);

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

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

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

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

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

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

Putem folosi și o funcție anonimă:

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