Eseménykezelők hozzáadása ciklusban JavaScriptben

Most pedig tanuljuk meg, hogyan adhatunk hozzá tömegesen eseménykezelőket elemekhez. Tegyük fel például, hogy vannak bekezdéseink:

<p>text1</p>
<p>text2</p>
<p>text3</p>

Tegyük fel, hogy van egy függvényünk is:

function func() {
	console.log('!');
}

Járjuk be bekezdéseinket egy ciklusban, és mindegyik bekezdéshez adjuk hozzá kattintás eseménykezelőként a func függvényt:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

Menjünk tovább, és tegyük úgy, hogy bármelyik bekezdésre kattintva a bekezdés szövege jelenjen meg. Van azonban egy probléma: a bekezdések száma sok, de az eseménykezelő függvény csak egy. Hogyan különböztethetjük meg a bekezdéseinket az eseménykezelő függvényen belül?

Ebben a this objektum segít - amikor a függvény meghívódik az esemény bekövetkeztekor, ez az objektum arra az elemre fog mutatni, ahol az esemény bekövetkezett. Alakítsuk át a func függvényünk kódját a mondottaknak megfelelően:

function func() {
	console.log(this.textContent); // kiírjuk a bekezdés szövegét
}

Adott a következő függvény:

function func() {
	this.value = Number(this.value) + 1;
}

Adottak továbbá input mezők. Tegye meg, hogy bármelyik input mezőből fókuszvesztéskor a fenti függvény fusson le.

Adottak számokkal ellátott bekezdések. Tegye meg, hogy bármelyik bekezdésre kattintva a benne lévő szám négyzetre emelődjen.