this-objekti JavaScriptissä

Nyt aiomme työskennellä erityisen objektin this kanssa, joka on saatavilla tapahtumankäsittelijäfunktiossa. Tämä objekti viittaa elementtiin, jossa tapahtuma sattui.

this-objekti on kätevä, kun elementti, jossa tapahtuma sattui, ja elementti, jolla toimenpiteet suoritetaan tapahtuman seurauksena, ovat sama elementti.

Esimerkiksi, jos meillä on syötekenttä, voimme sitouttaa siihen tarkkuuden menetyksen käsittelijän ja tapahtuman sattuessa tehdä jotain syötekentän tekstille. Tehdään kuvattu. Olkoon meillä annettu syötekenttä:

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

Haetaan viite siihen muuttujaan elem:

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

Sidotaan siihen funktio-tapahtuman käsittelijä tapahtumalle blur:

javascriptelem.addEventListener('blur', func);

Tämän funktion func sisällä on saatavilla objekti this, joka viittaa syötekenttäämme:

javascriptfunction func() {
  console.log(this); // sisältää viitteen elementtiimme
}

Tulostetaan syötekenttämme value-attribuutin sisältö:

javascriptfunction func() {
  console.log(this.value); // tulostetaan attribuutin sisältö
}

No, nyt kirjoitetaan syötekenttään jotain tekstiä:

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

Voidaan käyttää myös anonyymiä funktiota:

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