Objekt this JavaScriptis

Praegu hakkame töötama spetsiaalse objektiga this, mis on kättesaadav sündmuse töötlejafunktsioonis. See objekt osutab elemendile, milles sündmus toimus.

Objekt this on mugav, kui element, milles sündmus toimus, ja element, millega sündmuse tulemusel toiminguid tehakse, on üks ja seesama element.

Näiteks kui meil on sisendväli, saame sidum sellega fookuse kaotamise töötleja ja selle sündmuse toimumisel teha midagi sisendvälja tekstiga. Teeme kirjeldatu. Olgu meil antud sisendväli:

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

Võtame selle viida muutujasse elem:

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

Sidum sellega funktsiooni-sündmuse blur töötleja:

javascriptelem.addEventListener('blur', func);

Selle funktsiooni func sees on kättesaadav objekt this, mis osutab meie sisendväljale:

javascriptfunction func() {
  console.log(this); // sisaldab viida meie elemendile
}

Väljastame meie sisendvälja atribuudi value sisu:

javascriptfunction func() {
  console.log(this.value); // väljastame atribuudi sisu
}

Noh, ja nüüd kirjutame sisendväljale mingi teksti:

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

Saab kasutada ka anonüümset funktsiooni:

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