Attacher des gestionnaires d'événements en boucle en JavaScript

Dans la leçon précédente, nous avons appris à créer de nouveaux éléments dans une boucle. Maintenant, nous allons attacher des gestionnaires d'événements lors de la création de nouveaux éléments.

Supposons que nous ayons à nouveau ce div parent :

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

Lançons une boucle qui ajoutera à la fin de notre div 9 nouveaux paragraphes, en leur attachant un gestionnaire de clic :

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

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