Å legge til event handlers i en loop i JavaScript

La oss nå lære hvordan man i massevis legger til event handlers på elementer. La oss for eksempel si at vi har avsnitt:

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

La oss si at vi også har en funksjon:

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

La oss gå gjennom avsnittene våre i en loop og legge til funksjonen func som klikk-handler for hvert avsnitt:

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

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

La oss gå videre og gjøre det slik at når man klikker på et hvilket som helst avsnitt, vises teksten til det avsnittet. Det er imidlertid et problem: det er mange avsnitt, men bare en funksjon-handler. Hvordan skiller vi avsnittene våre inni funksjon-handleren?

Objektet this kan hjelpe oss med dette - når funksjonen kalles i øyeblikket hendelsen inntreffer, vil dette objektet peke på det elementet hvor hendelsen inntraff. La oss endre koden til funksjonen func i tråd med det som er sagt:

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

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