Дадаванне апрацоўшчыкаў у цыкле ў JavaScript

Давайце цяпер навучымся масава дадаваць апрацоўшчыкі падзей элементам. Хай, напрыклад, у нас ёсць абзацы:

html<p>text1</p>
<p>text2</p>
<p>text3</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); // выводiм тэкст абзаца
}

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