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:

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

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

javascriptfunction 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:

javascriptlet 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:

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

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