Přidávání obslužných rutin ve smyčce v JavaScriptu

Nyní se naučme hromadně přidávat obslužné rutiny událostí prvkům. Předpokládejme například, že máme odstavce:

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

Předpokládejme také, že máme funkci:

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

Projděme naše odstavce ve smyčce a každému odstavci přidejme jako obslužnou rutinu kliknutí funkci func:

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

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

Pojďme dál a udělejme to, aby při kliknutí na jakýkoli odstavec byl vypsán text tohoto odstavce. Existuje však problém: odstavec je mnoho, ale obslužná rutina je pouze jedna. Jak tedy uvnitř obslužné rutiny rozlišíme naše odstavce?

S tím nám pomůže objekt this - při volání funkce v okamžiku události tento objekt bude ukazovat na ten prvek, kde k této události došlo. Upravme kód naší funkce func v souladu s výše uvedeným:

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

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