이벤트 위임

이재윤·2021년 9월 8일
0

JavaScript

목록 보기
10/10
post-thumbnail

💻 이벤트 전파

이벤트 위임을 알아보기 전에 이벤트가 전파되는 과정을 알아야 합니다.
만약 이벤트를 발생시키면 이벤트 객체가 만들어 집니다. 만들어진 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM 트리를 통해 전파됩니다.

<ul id="fruits">
  <li id="apple">Apple</li>
  <li id="banana">Banana</li>
  <li id="orange">Orange</li>
</ul>

  1. 캡처링 단계
    li요소를 클릭하면 클릭 이벤트 객체가 생성되며, window에서 시작해 이벤트 타겟 방향으로 전파됩니다.
  2. 타깃 단계
    이벤트 객체는 이벤트를 발생시킨 이벤트 타깃에 도달하게 됩니다.
  3. 버블링 단계
    이후 이벤트 객체는 이벤트 타깃에서 window방향으로 전파됩니다.
<html>
  <body>
    <ul id="fruits">
      <li id="apple">Apple</li>
      <li id="banana">Banana</li>
      <li id="orange">Orange</li>
    </ul>
  </body>
  <script>
    const $fruits = document.querySelector('#fruits');
    const $banana = document.querySelector('#banana');
    
    // li 요소를 클릭할 경우 캡처링 단계에서 이벤트를 캐치합니다..
    $fruits.addEventListener('click', e => {
    	console.log(`이벤트 단계: ${e.eventPhase}`); // 1. 캡처링 단계
    	console.log(`이벤트 타깃: ${e.target}`); // li element
    	console.log(`커런트 타깃: ${e.currentTarget}`); // ul element
    }, true);
    
    // 타깃 단계에서 이벤트를 캐치합니다.
    $banana.addEventListener('click', e => {
    	console.log(`이벤트 단계: ${e.eventPhase}`); // 2. 타깃 단계
    	console.log(`이벤트 타깃: ${e.target}`); // li element
    	console.log(`커런트 타깃: ${e.currentTarget}`); // li element
    });
    
    // 버블링 단계에서 이벤트를 캐치합니다.
    $fruits.addEventListener('click', e => {
        console.log(`이벤트 단계: ${e.eventPhase}`); // 3. 버블링 단계
    	console.log(`이벤트 타깃: ${e.target}`); // li element
    	console.log(`커런트 타깃: ${e.currentTarget}`); // ul element
    });
  </script>
</html>

💻 이벤트 위임

이벤트 위임은 이벤트 버블링을 이용한 방법입니다.
여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트를 한번만 등록하면 됩니다. 이때 하위 DOM 요소에 이벤트를 발생시키면 이벤트는 위로 전파되어 버블링 단계에서 상위 DOM 요소가 이벤트를 캐치하게 됩니다.

이벤트 위임을 통해 하위 DOM 요소에서 발생한 이벤트를 처리할 때 주의할 점은 상위 요소에 이벤트 핸들러를 등록하기 때문에 이벤트를 실제로 발생시킨 DOM 요소가 원하는 요소가 아닐 수 있습니다.
이경우 아래와 같이 이벤트 타깃을 검사해주어야 합니다.

function activate({target}) {
  if (!target.matches('#fruits > li') {
      return;
  }
  ....
}

1개의 댓글