JavaScript에서 루프를 사용하여 이벤트 핸들러 부착하기

이전 강의에서 우리는 루프 안에서 새로운 요소를 생성하는 방법을 배웠습니다. 이제 새로운 요소를 생성할 때 이벤트 핸들러를 부착해 보겠습니다.

다시 다음과 같은 부모 div가 있다고 가정해 봅시다:

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

부모 div의 끝에 9개의 새 문단을 추가하고 클릭 이벤트 핸들러를 부착하는 루프를 실행해 보겠습니다:

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

div가 주어집니다. 우리의 div에 5개의 입력 필드를 추가하는 루프를 실행하세요. 문단도 주어집니다. 각 새 입력 필드가 포커스를 잃을 때 해당 텍스트를 문단에 기록하도록 만드세요.