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:

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

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

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

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

javascriptelem.addEventListener('blur', func);

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

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

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

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

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

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

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

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