JavaScript-те циклде өңдеушілерді қосу

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

html<p>мәтін1</p>
<p>мәтін2</p>
<p>мәтін3</p>

Бізде мынадай функция да болсын:

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

Абзацтарды циклде айналып өтіп, әрбір абзацқа func функциясын басу оқиғасының өңдеушісі ретінде қосамыз:

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

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

Енді әрбір абзацқа басқанда сол абзацтың мәтіні шығарылатын етіп жасайық. Алайда, мәселе мынада: абзац көп, ал функция-өңдеуші бір. Функция-өңдеушінің ішінде абзацтарды бір-бірінен қалай ажыратамыз?

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

javascriptfunction func() {
  console.log(this.textContent); // абзац мәтінін шығару
}

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