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);
}