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ą:

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

Gaukime nuorodą į jį kintamajame elem:

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

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

elem.addEventListener('blur', func);

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

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

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

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

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

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

Galima naudoti ir anoniminę funkciją:

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

Duotas įvesties laukas. Gaukus fokusą šio įvesties lauko įrašykite į jį skaičių 1, o praradus fokusą - skaičių 2. Kreipimuisi į įvesties lauką doroklio funkcijos viduje naudokite objektą this.

Duotas mygtukas, kurio reikšmė yra skaičius 1. Padarykite taip, kad paspaudus šį mygtuką, jo reikšmė kaskart padidėtų vienetu.