Gắn trình xử lý sự kiện trong vòng lặp bằng JavaScript

Trong bài học trước, chúng ta đã học cách tạo các phần tử mới trong vòng lặp. Bây giờ hãy gắn các trình xử lý sự kiện khi tạo các phần tử mới.

Giả sử chúng ta lại có một div cha như sau:

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

Hãy chạy một vòng lặp sẽ thêm 9 đoạn văn mới vào cuối div của chúng ta, đồng thời gắn một trình xử lý sự kiện click vào chúng:

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

for (let i = 1; i <= 9; i++) {
  let p = document.createElement('p');
  p.textContent = '!';
  
  // Gắn trình xử lý sự kiện click:
  p.addEventListener('click', function() {
    console.log(this.textContent);
  });
  
  parent.appendChild(p);
}