Anexando manipuladores em loop em JavaScript

Na lição anterior, aprendemos a criar novos elementos em um loop. Agora vamos anexar manipuladores de eventos ao criar novos elementos.

Suponha que temos novamente esta div pai:

html<div id="parent"></div>

Vamos executar um loop que adicionará ao final da nossa div 9 novos parágrafos, anexando a eles um manipulador de clique:

javascriptlet parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
  let p = document.createElement('p');
  p.textContent = '!';
  
  // Anexando o manipulador de clique:
  p.addEventListener('click', function() {
    console.log(this.textContent);
  });
  
  parent.appendChild(p);
}