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:

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

Võtame selle viida muutujasse elem:

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

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

elem.addEventListener('blur', func);

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

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

Väljastame meie sisendvälja atribuudi value sisu:

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

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

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

Saab kasutada ka anonüümset funktsiooni:

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

Antud sisendväli. Selle sisendvälja fookuse saamisel kirjutage sellesse number 1, ja fookuse kaotamisel - number 2. Sisendvälja poole pöördumiseks töötlejafunktsiooni sees kasutage objekti this.

Antud nupp, mille väärtuseks on number 1. Tehke nii, et sellele nupule klõpsates suureneks selle väärtus iga kord ühe võrra.