Objektet this i JavaScript

Nå skal vi jobbe med det spesielle objektet this, som er tilgjengelig i en funksjonsbehandler for hendelser. Dette objektet peker på elementet der hendelsen inntraff.

Objektet this er praktisk når elementet der hendelsen inntraff, og elementet som det utføres handlinger på som et resultat av hendelsen, er det samme elementet.

For eksempel, hvis vi har et input-felt, kan vi knytte en behandler for tap av fokus til det og når denne hendelsen inntreffer, gjøre noe med teksten i input-feltet. La oss gjøre det som er beskrevet. La oss si at vi har et input-felt:

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

La oss få en referanse til det i en variabel elem:

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

La oss knytte en funksjonsbehandler for hendelsen blur til det:

elem.addEventListener('blur', func);

Inne i denne funksjonen func vil objektet this være tilgjengelig, som peker på vårt input-felt:

function func() {
	console.log(this); // inneholder en referanse til vårt element
}

La oss skrive ut innholdet i attributten value i vårt input-felt:

function func() {
	console.log(this.value); // skriver ut innholdet i attributten
}

Vel, og la oss nå skrive en tekst inn i input-feltet:

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

Du kan også bruke en anonym funksjon:

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

Det er gitt et input-felt. Når dette input-feltet får fokus, skriv tallet 1 inn i det, og ved tap av fokus - tallet 2. For å referere til input-feltet inne i funksjonsbehandleren, bruk objektet this.

Det er gitt en knapp, hvis verdi er tallet 1. Gjør slik at ved hvert klikk på denne knappen økes verdien med én.