Прикачане на обработвачи в цикъл на 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);
}