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:

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

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

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

Piesienim tam notikuma blur apstrādes funkciju:

javascriptelem.addEventListener('blur', func);

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

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

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

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

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

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

Var izmantot arī anonīmu funkciju:

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