JavaScript의 범용 이벤트 위임

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

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

html<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 메서드를 사용하여 해결할 수 있습니다:

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