이벤트 위임(Event delegation)

특정 노드에 일일이 이벤트 리스너를 추가하는 대신, 이벤트 리스너를 특정 노드들을 포함하는 상위 노드에 연결하여 이벤트를 전파하는 것을 이벤트 위임이라고 한다.

• 위임된 이벤트는 포함된 하위 노드에 전파된다.
• 이벤트가 전파되는 방식의 기본값은 버블링(아래에서 위로)

<ul class"parentNode">
  <li class="childNode">
    <a href="/child-node-1">
      하위 노드 1
    </a>
  </li>
  <li class="childNode">
    <a href="/child-node-2">
      하위 노드 2
    </a>
  </li>
  <li class="childNode">
    <a href="/child-node-3">
      하위 노드 3
    </a>
  </li>
</ul>

const parentNode = document.querySelector('.parentNode");
  
// 상위 노드에 이벤트리스너 연결
parentNode.addEventListener('click', (e) => {
  
  /*
    대상 노드를 구분하는 방법은 여러가지
    ex:) 특정 클래스를 포함하는지 => classList.contains
  */
  const nodeName = e.target.nodeName.toLowerCase();
  
  // 해당 대상 노드에 처리 코드 작성
  switch(nodeName) {
    case 'li':
      console.log('<li>');
      break;
      
    case 'a':
      e.preventDefault();
      console.log('<a>');
      break;
      
    default: 
      console.log(`<${nodeName}>`)
  }
})

이벤트 위임이 필요한 이유

• 하위 노드들이 실시간으로 추가 또는 제거 될 때마다 이벤트 리스너를 매번 연결하거나 제거해야한다. 💩
• 이벤트 위임을 사용할수 있기에 새로운 노드가 추가, 제거 또는 업데이트 되어도 별도로 이벤트 리스너를 연결하거나 제거하지 않아도 된다.