Eseménykezelők hozzárendelése ciklusban JavaScriptben

Az előző leckében megtanultuk, hogyan hozzunk létre új elemeket ciklusban. Most pedig rendeljünk hozzá eseménykezelőket az új elemek létrehozásakor.

Tegyük fel, hogy ismét van egy ilyen szülő div-ünk:

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

Indítsunk egy ciklust, amely a divünk végéhez hozzáad 9 új bekezdést, és hozzárendel hozzájuk egy kattintás eseménykezelőt:

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

for (let i = 1; i <= 9; i++) {
  let p = document.createElement('p');
  p.textContent = '!';
  
  // Kattintás eseménykezelő hozzárendelése:
  p.addEventListener('click', function() {
    console.log(this.textContent);
  });
  
  parent.appendChild(p);
}