Objektet this i JavaScript

Nu skal vi arbejde med det specielle objekt this, som er tilgængeligt i funktionen-eventhandleren. Dette objekt peger på elementet, hvor eventet fandt sted.

Objektet this er praktisk, når elementet, hvor eventet fandt sted, og elementet, som der foretages handlinger på som følge af eventet, er det samme element.

For eksempel, hvis vi har et inputfelt, kan vi binde en eventhandler til det for tab af fokus og ved indtræffen af denne hændelse gøre noget med inputfeltets tekst. Lad os gøre det beskrevne. Lad os sige, at vi har dette inputfelt:

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

Lad os få en reference til det i variablen elem:

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

Lad os binde en funktion-eventhandler for eventet blur til det:

elem.addEventListener('blur', func);

Inde i denne funktion func vil objektet this være tilgængeligt, som peger på vores inputfelt:

function func() {
	console.log(this); // indeholder en reference til vores element
}

Lad os udskrive indholdet af attributten value for vores inputfelt:

function func() {
	console.log(this.value); // udskriver indholdet af attributten
}

Nå, og lad os nu skrive en eller anden tekst i inputfeltet:

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

Man kan også bruge en anonym funktion:

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

Der er givet et inputfelt. Når dette inputfelt modtager fokus, skal du skrive tallet 1 i det, og ved tab af fokus - tallet 2. For at tilgå inputfeltet inde i funktionen-eventhandleren skal du bruge objektet this.

Der er givet en knap, hvis værdi er tallet 1. Gør sådan, at ved hvert klik på denne knap øges dens værdi med en.