Odvezivanje rukovaoca događaja u petlji u JavaScript-u

Pretpostavimo sada da nemamo jedan element, već nekoliko njih. Na primer, nekoliko paragrafa:

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

Hajde da svakom od ovih paragrafa rukovaocem klika vežemo funkciju func:

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

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

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

Sada hajde da modifikujemo kod tako da svaki paragraf reaguje samo na prvi klik na njega. Da bismo to postigli, prilikom klika na paragraf ćemo odvezati rukovaoca koji je na njega vezan. Pritom će se odvajanje odnositi samo na ovaj paragraf, ne utičući na ostale.

Kao što već znate, element u kojem se dogodio događaj možemo dobiti u funkciji-rukovaocu preko this. To znači da treba izvršiti odvajanje rukovaoca od this, ovako:

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

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

function func() {
  console.log(this.textContent);
  this.removeEventListener('click', func); // odvezujemo rukovaoca
}