Objekt this v JavaScript

Trenutno bomo delali s posebnim objektom this, dostopnim v funkciji-obravnavalniku dogodka. Ta objekt kaže na element, v katerem se je dogodek zgodil.

Objekt this je priročen, ko sta element, v katerem se je dogodek zgodil, in element, s katerim se izvajajo dejanja kot posledica dogodka, isti element.

Na primer, če imamo vnosno polje, lahko nanj vežemo obravnavalca izgube fokusa in ob nastopu tega dogodka nekaj naredimo z besedilom vnosnega polja. Naredimo opisano. Naj imamo dano vnosno polje:

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

Dobimo referenco nanj v spremenljivko elem:

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

Povežimo z njim funkcijo-obravnavalca dogodka blur:

elem.addEventListener('blur', func);

Znotraj te funkcije func bo dostopen objekt this, ki kaže na naše vnosno polje:

function func() {
	console.log(this); // vsebuje referenco na naš element
}

Izpišimo vsebino atributa value našega vnosnega polja:

function func() {
	console.log(this.value); // izpišemo vsebino atributa
}

No, zdaj pa zapišimo v vnosno polje kakšno besedilo:

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

Lahko uporabimo tudi anonimno funkcijo:

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

Dano je vnosno polje. Ob pridobitvi fokusa s tem vnosnim poljem zapišite vanj številko 1, ob izgubi fokusa - številko 2. Za dostop do vnosnega polja znotraj funkcije-obravnavalca uporabite objekt this.

Dano je gumb, katerega vrednost je številka 1. Naredite tako, da se ob kliku na ta gumb njegova vrednost vsakič poveča za ena.