Adicionando manipuladores em loop em JavaScript

Agora vamos aprender a adicionar manipuladores de eventos a elementos em massa. Vamos supor, por exemplo, que temos parágrafos:

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

Suponha que também temos uma função:

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

Vamos percorrer nossos parágrafos em um loop e adicionar a função func como manipulador de clique a cada parágrafo:

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

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

Vamos ir além e fazer com que ao clicar em qualquer parágrafo, o texto desse parágrafo seja exibido. No entanto, há um problema: existem muitos parágrafos, mas apenas uma função de manipulação. Como podemos distinguir nossos parágrafos dentro da função de manipulação?

O objeto this nos ajudará com isso - quando a função é chamada no momento do evento, este objeto apontará para o elemento onde o evento ocorreu. Vamos modificar o código da nossa função func de acordo com o que foi dito:

function func() {
	console.log(this.textContent); // exibe o texto do parágrafo
}

A seguinte função é fornecida:

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

Também são fornecidos inputs. Faça com que, ao perder o foco em qualquer um de nossos inputs, a função acima seja executada.

Parágrafos com números são fornecidos. Faça com que ao clicar em qualquer parágrafo, o número nele seja elevado ao quadrado.