Die objek this in JavaScript

Tans gaan ons werk met die spesiale objek this, beskikbaar in die gebeurtenishandteringsfunksie. Hierdie objek wys na die element waarin die gebeurtenis plaasgevind het.

Die objek this is handig wanneer die element waarin die gebeurtenis plaasgevind het, en die element waarmee aksies as gevolg van die gebeurtenis uitgevoer word, dieselfde element is.

Byvoorbeeld, as ons 'n invoerveld het, kan ons 'n fokusverlies-handleerder daaraan koppel en by die intree van daardie gebeurtenis iets doen met die teks van die invoerveld. Laat ons dit doen. Kom ons het die volgende invoerveld:

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

Laat ons 'n verwysing daarna in die veranderlike elem kry:

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

Laat ons 'n gebeurtenishandteringsfunksie vir die blur-gebeurtenis daaraan koppel:

elem.addEventListener('blur', func);

Binne hierdie funksie func sal die objek this beskikbaar wees, wat na ons invoerveld wys:

function func() {
	console.log(this); // bevat 'n verwysing na ons element
}

Laat ons die inhoud van die value-kenmerk van ons invoerveld uitskryf:

function func() {
	console.log(this.value); // druk die inhoud van die kenmerk
}

Nou, laat ons 'n teks in die invoerveld skryf:

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

'n Anonieme funksie kan ook gebruik word:

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

Gegee 'n invoerveld. Wanneer hierdie invoerveld fokus kry, skryf die getal 1 daarin, en met fokusverlies - die getal 2. Gebruik die objek this om binne die gebeurtenishandteringsfunksie na die invoerveld te verwys.

Gegee 'n knoppie waarvan die waarde die getal 1 is. Maak so dat met elke klik op hierdie knoppie sy waarde elke keer met een toeneem.