Objekt this v JavaScript

Teraz budeme pracovať so špeciálnym objektom this, dostupným v funkcii-obslužnej rutine udalosti. Tento objekt ukazuje na element, v ktorom udalosť nastala.

Objekt this je užitočný, keď element, v ktorom udalosť nastala, a element, s ktorým sa vykonávajú akcie v dôsledku udalosti, sú ten istý element.

Napríklad, ak máme input, môžeme k nemu priviazať obslužnú rutinu straty fókusu a pri nastatí tejto udalosti niečo urobiť s textom inputu. Urobme popísané. Nech je nám daný input:

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

Získajme odkaz naňho v premennej elem:

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

Priviažme k nemu funkciu-obslužnú rutinu udalosti blur:

javascriptelem.addEventListener('blur', func);

Vnútri tejto funkcie func bude dostupný objekt this, ukazujúci na náš input:

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

Vypíšme obsah atribútu value nášho inputu:

javascriptfunction func() {
  console.log(this.value); // vypíšeme obsah atribútu
}

No, a teraz zapíšme do inputu nejaký text:

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

Môžeme použiť aj anonymnú funkciu:

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