Додавање руковаоца у петљи у 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); // исписујемо текст пасуса
}

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