Het object this in JavaScript

Nu gaan we werken met het speciale object this, beschikbaar in de gebeurtenisafhandelingsfunctie. Dit object verwijst naar het element waarin de gebeurtenis heeft plaatsgevonden.

Het object this is handig wanneer het element waarin de gebeurtenis plaatsvindt, en het element waarmee acties worden ondernomen als gevolg van de gebeurtenis, hetzelfde element zijn.

Bijvoorbeeld, als we een invoerveld hebben, kunnen we er een blur-gebeurtenisafhandelaar aan binden en bij het optreden van deze gebeurtenis iets doen met de tekst van het invoerveld. Laten we het beschrevene doen. Stel dat we een invoerveld hebben:

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

Laten we een referentie eraan in de variabele elem zetten:

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

Laten we er een functie-afhandelaar voor de gebeurtenis blur aan binden:

elem.addEventListener('blur', func);

Binnen deze functie func is het object this beschikbaar, dat naar ons invoerveld wijst:

function func() {
	console.log(this); // bevat een verwijzing naar ons element
}

Laten we de inhoud van het attribuut value van ons invoerveld weergeven:

function func() {
	console.log(this.value); // geeft de inhoud van het attribuut weer
}

Nu, laten we wat tekst in het invoerveld zetten:

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

We kunnen ook een anonieme functie gebruiken:

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

Gegeven een invoerveld. Bij het krijgen van focus door dit invoerveld schrijf je er het getal 1 in, en bij het verliezen van focus - het getal 2. Gebruik voor toegang tot het invoerveld binnen de gebeurtenisafhandelingsfunctie het object this.

Gegeven een knop, waarvan de waarde het getal 1 is. Zorg ervoor dat bij elke klik op deze knop de waarde ervan met één toeneemt.