Προσθήκη Χειριστών Γεγονότων σε Βρόχο σε JavaScript

Στο προηγούμενο μάθημα μάθαμε να δημιουργούμε νέα στοιχεία σε βρόχο. Ας δένομε τώρα χειριστές γεγονότων κατά τη δημιουργία νέων στοιχείων.

Ας υποθέσουμε ότι έχουμε πάλι αυτό το γονικό div:

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

Ας εκτελέσουμε έναν βρόχο που θα προσθέσει στο τέλος του div μας 9 νέες παραγράφους, δένοντάς τους έναν χειριστή κλικ:

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

for (let i = 1; i <= 9; i++) {
  let p = document.createElement('p');
  p.textContent = '!';
  
  // Δένουμε τον χειριστή κλικ:
  p.addEventListener('click', function() {
    console.log(this.textContent);
  });
  
  parent.appendChild(p);
}