Pridávanie obslužných rutín v cykle v JavaScripte

Poďme sa teraz naučiť hromadne pridávať obslužné rutiny udalostí elementom. Nech, napríklad, máme odseky:

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

Nech máme tiež funkciu:

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

Poďme prejsť naše odseky v cykle a každému odseku pridajme ako obslužnú rutinu kliknutia funkciu func:

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

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

Poďme ďalej a urobme tak, aby pri kliknutí na ľubovoľný odsek bol vypísaný text tohto odseku. Je tu však problém: odsekov je veľa, ale obslužná rutina je len jedna. Ako môžeme rozlíšiť naše odseky vo vnútri obslužnej rutiny?

S tým nám pomôže objekt this - pri volaní funkcie v momente udalosti tento objekt bude ukazovať na ten element, kde sa táto udalosť stala. Prepracujme kód našej funkcie func v súlade s povedaným:

javascriptfunction func() {
  console.log(this.textContent); // vypíšeme text odseku
}

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