Att lägga till hanterare i en loop i JavaScript

Låt oss nu lära oss att masslagt lägga till händelsehanterare till element. Låt oss till exempel säga att vi har stycken:

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

Låt oss också säga att vi har en funktion:

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

Låt oss gå igenom våra stycken i en loop och lägga till funktionen func som klickhanterare för varje stycke:

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

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

Låt oss gå vidare och göra så att när man klickar på vilket stycke som helst så visas texten i det stycket. Det finns dock ett problem: det finns många stycken, men bara en hanterarfunktion. Hur kan vi skilja mellan våra stycken inuti hanterarfunktionen?

Objektet this kan hjälpa oss med detta - när funktionen anropas vid händelsen kommer detta objekt att peka på det element där händelsen inträffade. Låt oss omarbeta koden för vår funktion func i enlighet med vad som sagts:

javascriptfunction func() {
  console.log(this.textContent); // visar styckets text
}

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