Objektas this JavaScript'e

Dabar dirbsime su specialiu objektu this, prieinamu įvykio doroklio funkcijoje. Šis objektas nurodo į elementą, kuriame įvyko įvykis.

Objektas this yra patogus, kai elementas, kuriame įvyko įvykis, ir elementas, su kuriuo atliekami veiksmai dėl įvykio, yra tas pats elementas.

Pavyzdžiui, jei turime įvesties lauką, galime pririšti prie jo fokuso praradimo doroklį ir įvykus šiam įvykiui ką nors padaryti su įvesties lauko tekstu. Padarykime tai, kas aprašyta. Tarkime, kad turime įvesties lauką:

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

Gaukime nuorodą į jį kintamajame elem:

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

Pririškime prie jo įvykio blur doroklio funkciją:

javascriptelem.addEventListener('blur', func);

Šios funkcijos func viduje bus prieinamas objektas this, nurodantis į mūsų įvesties lauką:

javascriptfunction func() {
  console.log(this); // contains a reference to our element
}

Išveskime mūsų įvesties lauko atributo value turinį:

javascriptfunction func() {
  console.log(this.value); // išvesime atributo turinį
}

O dabar įrašykime į įvesties lauką kokį nors tekstą:

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

Galima naudoti ir anoniminę funkciją:

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