Objekts this JavaScript

Tagad mēs strādāsim ar īpašu objektu this, kas pieejams notikuma apstrādes funkcijā. Šis objekts norāda uz elementu, kurā notikums noticis.

Objekts this ir ērts, kad elements, kurā notikums noticis, un elements, ar ko tiek veiktas darbības notikuma rezultātā, - ir viens un tas pats elements.

Piemēram, ja mums ir ievades lauks, mēs varam piesiet tam fokusa zaudēšanas apstrādes funkciju un, kad šis notikums iestājas, kaut ko izdarīt ar ievades lauka tekstu. Darīsim aprakstīto. Lai mums ir dots ievades lauks:

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

Iegūsim saiti uz to mainīgajā elem:

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

Piesienim tam notikuma blur apstrādes funkciju:

elem.addEventListener('blur', func);

Šīs funkcijas func iekšienē būs pieejams objekts this, kas norāda uz mūsu ievades lauku:

function func() {
	console.log(this); // satur saiti uz mūsu elementu
}

Izvadīsim mūsu ievades lauka atribūta value saturu:

function func() {
	console.log(this.value); // izvadīsim atribūta saturu
}

Nu, bet tagad ierakstīsim ievades laukā kādu tekstu:

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

Var izmantot arī anonīmu funkciju:

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

Dots ievades lauks. Iegūstot fokusu šim ievades laukam ierakstiet tajā skaitli 1, bet zaudējot fokusu - skaitli 2. Lai piekļūtu ievades laukam apstrādes funkcijas iekšienē, izmantojiet objektu this.

Dota poga, kuras vērtība ir skaitlis 1. Padariet tā, lai, uzklikšķinot uz šīs pogas, tās vērtība katru reizi palielinātos par vienu.