Tilføjelse af event handlers i loop i JavaScript

Lad os nu lære at tilføje event handlers til elementer i massevis. For eksempel, lad os sige at vi har disse afsnit:

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

Lad os også sige, at vi har en funktion:

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

Lad os gennemgå vores afsnit i et loop og tilføje funktionen func som click event handler til hvert afsnit:

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

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

Lad os gå et skridt videre og gøre det sådan, at ved at klikke på ethvert afsnit vises afsnittets tekst. Der er dog et problem: der er mange afsnit, men kun een event handler funktion. Hvordan kan vi skelne vores afsnit inde i event handler funktionen?

Objektet this kan hjælpe os med dette - når funktionen kaldes i øjeblikket af begivenheden, vil dette objekt pege på det element, hvor begivenheden skete. Lad os omstrukturere koden for vores funktion func i overensstemmelse med det nævnte:

javascriptfunction func() {
  console.log(this.textContent); // viser afsnittets tekst
}

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