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:

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

Supongamos que también tenemos una función:

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

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

let 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:

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

Se da la siguiente función:

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

También se dan inputs. Haz que al perder el foco en cualquiera de nuestros inputs se ejecute la función anterior.

Se dan párrafos con números. Haz que al hacer clic en cualquier párrafo, el número en él se eleve al cuadrado.