2025-07-17 (목)

이벤트 위임 (Event Delegation)

• 일반적인 방식 (이벤트 리스너를 개별 요소에 직접 등록):

     <ul id="myList">
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
     </ul>
    
     <script>
       const items = document.querySelectorAll('#myListli');
       items.forEach(item => {
        item.addEventListener('click', function() {
          console.log('Clicked:', this.textContent);
        });
      });
   </script>

이 방식은 각 <li> 요소마다 별도의 이벤트 리스너를 등록합니다.
만약 <li> 요소가 100개라면 100개의 리스너가 메모리에 할당되고 관리되어야 합니다.
또한, 나중에 동적으로 새로운 <li> 가 추가되면, 그 새로운 <li>에도 다시 addEventListener를 호출해줘야 합니다. 이는 비효율적이고 관리하기 번거롭습니다.

이벤트 위임 방식

이벤트 위임은 이벤트 버블링(Event Bubbling)이라는 DOM의 특성을 활용합니다. 이벤트 버블링은 자식 요소에서 발생한 이벤트가 부모 요소를 거쳐 최상위 요소(document 또는 window)까지 전파되는 현상입니다.

이벤트 위임에서는 개별 요소에 리스너를 등록하는 대신, 이벤트가 발생할 수 있는 모든 자식 요소를 포함하는 공통의 부모 요소(예: <ul> 또는document.body)에 단 하나의 이벤트 리스너를 등록합니다.

    1 <ul id="myList">
    2   <li>Item 1</li>
    3   <li>Item 2</li>
    4   <li>Item 3</li>
    5 </ul>
    6
    7 <script>
    8   const myList = document.getElementById('myList');
    9   myList.addEventListener('click', function(event) {
   10     // event.target은 실제로 클릭된 요소를 가리킵니다.
   11     if (event.target.tagName === 'LI') {
   12       console.log('Clicked:', event.target.textContent);
   13     }
   14   });
   15 </script>

여기서 myList에 단 하나의 click 리스너만 등록했습니다. Item 1을 클릭하면, 클릭 이벤트는 Item 1에서 발생하지만, 버블링을 통해 myList까지
전파됩니다. myList에 등록된 리스너는 이 이벤트를 감지하고, event.target을 통해 실제로 클릭된 요소가 Item 1임을 알 수 있습니다.

이벤트 위임의 장점:

1. 메모리 효율성: 수많은 요소에 개별 리스너를 등록하는 대신, 단 하나의 리스너만 등록하므로 메모리 사용량이 줄어듭니다.
2. 동적 요소 처리: 나중에 동적으로 추가되는 요소(예: Item 4)에 대해서도 별도의 리스너 등록 없이 자동으로 이벤트 처리가 가능합니다. 이벤트는
   여전히 버블링을 통해 부모 요소의 리스너에 도달하기 때문입니다.
3. 코드 관리 용이성: 이벤트 처리 로직이 한 곳에 집중되어 코드를 관리하기 더 쉽습니다.

이벤트 위임 개념