Dodawanie obsługi zdarzeń w pętli w JavaScript

Nauczmy się teraz masowo dodawać obsługę zdarzeń do elementów. Załóżmy na przykład, że mamy akapity:

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

Załóżmy, że mamy również funkcję:

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

Przejdźmy przez nasze akapity w pętli i do każdego akapitu dodajmy jako obsługę kliknięcia funkcję func:

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

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

Idźmy dalej i zróbmy tak, aby po kliknięciu na dowolny akapit wyświetlał się tekst tego akapitu. Jest jednak problem: akapitów jest wiele, a funkcja obsługująca tylko jedna. Jak odróżnimy nasze akapity wewnątrz funkcji obsługującej?

Pomoże nam w tym obiekt this - przy wywołaniu funkcji w momencie zdarzenia ten obiekt będzie wskazywał na ten element, w którym to zdarzenie się wydarzyło. Przeróbmy kod naszej funkcji func zgodnie z powyższym:

javascriptfunction func() {
  console.log(this.textContent); // wyświetlamy tekst akapitu
}

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