Objektet this i JavaScript

Nu ska vi arbeta med det speciella objektet this, tillgängligt i händelsehanterarfunktionen. Detta objekt pekar på elementet där händelsen inträffade.

Objektet this är praktiskt när elementet, där händelsen inträffade, och elementet som åtgärdas som ett resultat av händelsen är ett och samma element.

Till exempel, om vi har en input, kan vi binda en händelsehanterare för förlust av fokus och vid denna händelse göra något med inputens text. Låt oss göra som beskrivet. Låt oss säga att vi har en input:

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

Låt oss få en referens till den i variabeln elem:

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

Låt oss binda en händelsehanterarfunktion för händelsen blur till den:

elem.addEventListener('blur', func);

Inuti denna funktion func kommer objektet this att vara tillgängligt, som pekar på vår input:

function func() {
	console.log(this); // innehåller en referens till vårt element
}

Låt oss skriva ut innehållet i attributet value för vår input:

function func() {
	console.log(this.value); // skriver ut attributets innehåll
}

Och nu, låt oss skriva in någon text i inputen:

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

Man kan också använda en anonym funktion:

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

En input ges. När denna input får fokus, skriv siffran 1 i den, och vid förlust av fokus - siffran 2. För att referera till inputen inuti händelsehanterarfunktionen, använd objektet this.

En knapp ges, vars värde är siffran 1. Gör så att vid varje klick på denna knapp ökar dess värde med ett.