Eseménykezelők leválasztása ciklusban JavaScriptben

Tegyük fel, hogy most nem egy elemünk van, hanem több. Például több bekezdés:

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

Adjunk mindegyik bekezdéshez egy func függvényt kattintás eseménykezelőként:

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

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

function func() {
  console.log(this.textContent);
}

Most módosítsuk úgy a kódot, hogy minden bekezdés csak az első rá kattintáskor reagáljon. Ehhez a bekezdésre kattintáskor leválasztjuk az ahhoz kapcsolt eseménykezelőt. Ezzel a leválasztással csak az adott bekezdést érintjük, a többit nem.

Ahogy már tudod, az elem, amelyben az esemény bekövetkezett, megkapható a függvény-kezelőben a this segítségével. Ez azt jelenti, hogy a kezelőt a this-ről kell leválasztani, így:

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

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

function func() {
  console.log(this.textContent);
  this.removeEventListener('click', func); // leválasztjuk a kezelőt
}