Sündmuste lisamine tsüklis JavaScriptis

Õpime nüüd, kuidas lisada elementidele sündmuste töötlejaid hulgi. Oletame näiteks, et meil on lõigud:

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

Oletame, et meil on ka funktsioon:

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

Läbime oma lõigud tsüklis ja lisame igale lõigule klikk sündmuse töötlejana funktsiooni func:

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

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

Lähme edasi ja teeme nii, et mis tahes lõigu peale klõpsates kuvataks selle lõigu tekst. Siiski on probleem: lõike on palju, kuid töötleja funktsioon on üks. Kuidas me saame oma lõike töötleja funktsiooni sees eristada?

Selles aitab meil objekt this - kui funktsiooni kutsutakse sündmuse toimumise hetkel, siis see objekt viitab sellele elemendile, kus see sündmus toimus. Muudame oma funktsiooni func koodi vastavalt öeldule:

javascriptfunction func() {
  console.log(this.textContent); // kuvame lõigu teksti
}

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