[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가 있다면 그 이벤트 리스너를 각각 만들어서 등록하게 되는 꼴이다.

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>

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