JavaScript-те циклде оқиғалар өңдеушілерін ажырату

Енді бізде бір элемент емес, бірнеше элемент бар делік. Мысалы, бірнеше абзац:

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

Осы абзацтардың әрқайсысына түрткінің өңдеушісі ретінде func функциясын байланыстырайық:

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

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

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

Енді кодты әрбір абзац тек оған бірінші рет басқанда ғана жауап беретіндей етіп өзгертейік. Ол үшін абзацқа басқанда, оған байланыстырылған өңдеушіні ажыратамыз. Сонымен бірге ажырату дәл осы абзацқа қатысты болады, қалғандарына әсер етпейді.

Өңдеуші функцияда оқиға болған элементті this арқылы алуға болатынын білесіз. Бұл this-тен өңдеушіні ажырату керек дегенді білдіреді, мынау сияқты:

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

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

function func() {
  console.log(this.textContent);
  this.removeEventListener('click', func); // өңдеушіні ажыратамыз
}