JavaScript의 범용 이벤트 위임

이전 수업에서 제시된 코드는 작동하지만, 단점이 없지는 않습니다. 이러한 단점들을 분석하고 더욱 범용적인 해결책을 작성해 봅시다.

우리 코드의 단점은 li 안에 중첩된 태그가 있을 경우 나타납니다. 이 경우에는 i 태그라고 가정하겠습니다:

<ul>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
</ul>

이 경우 i 태그를 클릭하면 event.target에 이벤트가 발생한 정확한 태그가 들어가기 때문에, 원하는 대로 li 태그의 끝이 아니라 i 태그의 끝에 느낌표가 추가됩니다.

이 문제는 closest 메서드를 사용하여 해결할 수 있습니다:

list.addEventListener('click', function(event) {
	let li = event.target.closest('li');
	
	if (li) {
		li.innerHTML = li.innerHTML + '!';
	}
});

제시된 해결책을 따라해 보세요.