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

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

Haetaan viite siihen muuttujaan elem:

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

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

elem.addEventListener('blur', func);

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

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

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

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

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

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

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

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

Annettu syötekenttä. Kun tämä syötekenttä saa tarkkuuden, kirjoita siihen numero 1, ja kun tarkkuus menetetään - numero 2. Käytä viitataksesi syötekenttään funktion käsittelijän sisällä objektia this.

Annettu painike, jonka arvona on numero 1. Tee niin, että kun tähän painikkeeseen klikataan, sen arvo kasvaa joka kerta yhdellä.