JavaScript의 이벤트 위임

이전 강의에서 새로운 요소를 추가할 때 발생하는 문제와 그 해결책이 설명되었습니다. 이번 강의에서는 이 문제를 극복하는 더 나은 방법인 이벤트 위임을 살펴보겠습니다. 함께 알아봅시다.

이미 알고 계시듯이, li를 클릭하면 동시에 ul도 클릭하게 됩니다. 이것은 이벤트 버블링 덕분에 가능합니다. 우리는 이 점을 이용하여 각 li에 이벤트를 등록하는 대신, 그들의 부모인 ul에 이벤트를 등록함으로써 우리의 과제를 해결할 수 있습니다:

list.addEventListener('click', function() {
	
});

이제 이벤트 핸들러 내에서 this는 핸들러가 바인딩된 요소를 가리키고, event.target는 이벤트가 발생한 요소를 가리킵니다:

list.addEventListener('click', function(event) {
	console.log(this);         // 우리의 목록
	console.log(event.target); // 목록 항목
});

클릭이 발생한 li의 끝에 느낌표가 추가되도록 해봅시다:

list.addEventListener('click', function(event) {
	event.target.textContent = event.target.textContent + '!';
});

제시된 솔루션을 반복해 보세요. 새로운 li들도 클릭에 반응할 것임을 확인하세요.