A this objektum JavaScriptben

Most egy speciális this objektummal fogunk dolgozni, ami az eseménykezelő függvényben érhető el. Ez az objektum arra az elemre mutat, amiben az esemény bekövetkezett.

A this objektum akkor hasznos, amikor az az elem, amelyben az esemény bekövetkezett, és az az elem, amellyel az esemény következtében műveleteket végeznek, ugyanaz az elem.

Például, ha van egy input mezőnk, akkor hozzárendelhetünk egy fókuszvesztés eseménykezelőt, és amikor ez az esemény bekövetkezik, valamit tehetünk az input szövegével. Tegyük meg a leírtakat. Legyen egy input mezőnk:

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

Kapjuk meg a hivatkozást rá egy elem változóba:

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

Rendeljünk hozzá egy blur esemény kezelő függvényt:

elem.addEventListener('blur', func);

Ezen func függvényen belül elérhető lesz a this objektum, amely az input mezőnkre mutat:

function func() {
	console.log(this); // tartalmazza az elemre mutató hivatkozást
}

Írjuk ki az input value attribútumának tartalmát:

function func() {
	console.log(this.value); // kiírjuk az attribútum tartalmát
}

Most pedig írjunk be valamilyen szöveget az input mezőbe:

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

Használhatunk név nélküli függvényt is:

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

Adott egy input mező. Amikor ez az input mező megkapja a fókuszt, írja bele az 1 számot, és amikor elveszti a fókuszt - az 2 számot. Az input mezőre való hivatkozáshoz az eseménykezelő függvényen belül használja a this objektumot.

Adott egy gomb, melynek értéke a 1 szám. Tegye meg, hogy a gombra kattintáskor értéke minden alkalommal eggyel nőjjön.