이벤트 위임

 

캡처링과 버블링을 활용하여 이벤트 위임(event delegation) 을 구현하는 시간을 가져보겠습니다.

이벤트 위임은 비슷한 방식으로 여러 요소를 다룰때 사용합니다.

이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 하나만 할당하여 요소들을 한번에 다룰 수 있습니다.

공통 조상에 할당한 핸들러에서 event.target 을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있습니다.

예를 들어, 여러 개의 리스트 아이템(<li>)이 있는 목록(<ul>)이 있다고 가정해봅시다. 각 리스트 아이템을 클릭할 때마다 어떤 동작을 수행하고자 합니다. 이때 이벤트 위임을 사용하면 모든 리스트 아이템에 각각 이벤트 핸들러를 등록하지 않아도 됩니다.

아래는 이벤트 위임을 사용하여 목록의 항목을 클릭했을 때 해당 항목의 텍스트를 콘솔에 출력하는 예시 코드입니다

<ul id="myList">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
  <!-- 추가적인 항목들이 동적으로 생성될 수 있습니다. -->
</ul>

// 상위 요소인 <ul>을 선택합니다.
const myList = document.getElementById('myList');

// <ul>에 클릭 이벤트 핸들러를 등록합니다.
myList.addEventListener('click', function(event) {
  // 클릭된 요소를 가져옵니다.
  const clickedItem = event.target;

  // 클릭된 요소가 <li>인지 확인하고, <li>이면 내용을 콘솔에 출력합니다.
  if (clickedItem.tagName === 'LI') {
    console.log('클릭된 항목:', clickedItem.textContent);
  }
});

<ul> 요소에 하나의 클릭 이벤트 핸들러를 등록했습니다. 그리고 이벤트 핸들러에서는 클릭된 요소를 가져온 후, 이 요소가 <li>인지 확인하여 해당 항목의 내용을 콘솔에 출력하도록 처리하고 있습니다.

결과적으로, 목록에 새로운 항목이 추가되더라도 이벤트 핸들러는 기존과 동일하게 새로운 항목에 대해서도 동작합니다. 이는 이벤트 위임으로 인해 모든 리스트 아이템에 개별적으로 이벤트 핸들러를 등록할 필요가 없기 때문에 코드를 간결하고 효율적으로 유지할 수 있다는 장점이 있습니다. 또한 메모리 측면해서도 효율적입니다.