Event-Handler in Schleifen in JavaScript

In der vorherigen Lektion haben wir gelernt, wie man neue Elemente in einer Schleife erstellt. Lassen Sie uns nun Ereignis-Handler beim Erstellen neuer Elemente hinzufügen.

Nehmen wir an, wir haben wieder diesen Eltern-Div:

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

Starten wir eine Schleife, die am Ende unseres Divs 9 neue Absätze hinzufügt und ihnen einen Klick-Handler hinzufügt:

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

for (let i = 1; i <= 9; i++) {
  let p = document.createElement('p');
  p.textContent = '!';
  
  // Klick-Handler hinzufügen:
  p.addEventListener('click', function() {
    console.log(this.textContent);
  });
  
  parent.appendChild(p);
}