Aggiunta di gestori in ciclo in JavaScript

Ora impariamo ad aggiungere in massa i gestori di eventi agli elementi. Supponiamo, ad esempio, di avere dei paragrafi:

html<p>testo1</p>
<p>testo2</p>
<p>testo3</p>

Supponiamo inoltre di avere una funzione:

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

Iteriamo i nostri paragrafi in un ciclo e ad ogni paragrafo aggiungiamo come gestore del click la funzione func:

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

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

Andiamo oltre e facciamo in modo che cliccando su qualsiasi paragrafo venga visualizzato il testo di quel paragrafo. C'è, tuttavia, un problema: i paragrafi sono molti, ma la funzione gestore è una sola. Come possiamo distinguere i nostri paragrafi all'interno della funzione gestore?

In questo ci aiuta l'oggetto this - quando la funzione viene chiamata al momento dell'evento, questo oggetto punterà all'elemento in cui l'evento si è verificato. Modifichiamo il codice della nostra funzione func in base a quanto detto:

javascriptfunction func() {
  console.log(this.textContent); // visualizziamo il testo del paragrafo
}

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