Adición de manejadores en un bucle en JavaScript

Ahora aprendamos a agregar masivamente manejadores de eventos a los elementos. Supongamos, por ejemplo, que tenemos párrafos:

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

Supongamos que también tenemos una función:

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

Recorramos nuestros párrafos en un ciclo y a cada párrafo agreguemos como manejador del clic la función func:

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

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

Vayamos más allá y hagamos que al hacer clic en cualquier párrafo se muestre el texto de ese párrafo. Sin embargo, hay un problema: hay muchos párrafos, pero solo una función manejadora. ¿Cómo podemos distinguir nuestros párrafos dentro de la función manejadora?

El objeto this nos ayudará con esto - cuando se llama a la función en el momento del evento, este objeto apuntará al elemento donde ocurrió ese evento. Modifiquemos el código de nuestra función func de acuerdo con lo dicho:

javascriptfunction func() {
  console.log(this.textContent); // mostramos el texto del párrafo
}

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