[JavaScript] Event Delegation (이벤트 위임)

이벤트 위임은 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용된다. 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다.

	<ul>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ul>
    
    <script>
      const children = document.querySelectorAll('li');
      children.forEach(li => {
        li.addEventListener('click', () => {
          li.classList.add('select');
        });
      });
    </script>

위의 코드는 좋지 않은 코드이다. 모든 li의 요소들을 찾아서 일일이 이벤트를 등록하는 것은 좋지않다. 만약 수천개의 수만개의 li가 있다면 그 이벤트 리스너를 각각 만들어서 등록하게 되는 꼴이다.
CSS 선택자나 반복자를 사용한다면 중복 코드를 개선할 수 있지만, 동적으로 추가되는 요소들의 이벤트는 제어하기 어려울 수 있다. 이런 경우 위임을 사용하면 좀 더 간결하게 코드를 작성할 수 있다.

Event Delegation(이벤트 위임) 을 사용하자.

• 이벤트 리스너를 자식 노드에 추가하는 것보다, 부모에 한 번 등록하자.

	<ul>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ul>
    
    <script>
     const parent = document.querySelector('ul');
      parent.addEventListener('click', e => {        
        if (e.target.tagName == 'LI') {
          e.target.classList.add('select);
        }
      });
    </script>

li 요소에 이벤트 리스너를 등록하는 대신, ul 요소에만 이벤트 리스너를 등록하였다. 이벤트 버블링을 통해 이벤트가 발생한 target 요소로부터 상위 요소로 이벤트가 전파된다.

이렇게 이벤트 버블링을 이용하여 이벤트를 제어하는 패턴을 이벤트 위임이라고 하며, 이벤트 위임을 사용하면 동적으로 추가되는 요소나 많은 자식 요소들의 이벤트를 효과적으로 다룰 수 있다.

이벤트 위임은 이벤트 버블링이 발생하는 경우에만 가능하며, 이벤트가 발생한 target을 기준으로 정의한 것이 아니기 때문에 이벤트 동작을 파악할 때 가독성이 떨어질 수 있다.

• https://ko.javascript.info/event-delegation