Добавление обработчиков в цикле в 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;
}