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:

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

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

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

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

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

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