이벤트 위임과 이벤트 버블링

이벤트 위임(Event Delegation)은 이벤트 버블링(Event Bubbling) 덕분에 가능한 기술입니다. 이를 이해하기 위해서는 이벤트 버블링의 메커니즘과 이벤트 위임이 어떻게 동작하는지 깊이 이해할 필요가 있습니다.

1. (자식에서 부모로 이벤트가 전파되는) 이벤트 버블링(Event Bubbling) 메커니즘

이벤트 버블링은 특정 요소에서 발생한 이벤트가 부모 요소로 전파(전달)되는 과정을 의미합니다. 예를 들어, 클릭 이벤트가 발생하면 해당 이벤트는 그 요소에서 시작해 상위 부모 요소로 단계적으로 전파됩니다. 최상위 요소인 document까지 이벤트가 전달될 수 있습니다.

단계:

• 타깃 단계 (Target Phase): 이벤트가 발생한 요소에서 실행됩니다.
• 버블링 단계 (Bubbling Phase): 이벤트가 부모, 조부모 등 상위 요소로 올라가면서 실행됩니다.

2. (부모가 자식으로부터 이벤트를 전달 받을 수 있는) 이벤트 위임(Event Delegation)

이벤트 위임은 다수의 자식 요소에 각각 이벤트 리스너를 등록하는 대신, 상위 부모 요소에 하나의 이벤트 리스너를 등록하고, 이벤트 버블링을 이용해 자식 요소에서 발생한 이벤트를 부모에서 처리하는 방식입니다.

 

<ul id="parent">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  const parent = document.getElementById('parent');

  // 부모 요소에 이벤트 리스너 등록
  parent.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      console.log(event.target.textContent); // 클릭한 li 요소의 텍스트 출력
    }
  });
</script>

 

위 코드에서 li 태그에 각각 이벤트 리스너를 다는 대신, ul 요소에 하나의 리스너를 달고 클릭된 자식 li 요소를 event.target으로 처리합니다.

이벤트 위임이 가능한 이유:

이벤트 위임이 가능한 이유는 이벤트 버블링 덕분입니다. li 요소에서 발생한 클릭 이벤트는 ul(부모)로 전달됩니다. 따라서, 굳이 각각의 li요소에 이벤트리스너를 따로 달지 않아도, 이들을 모두 포괄하는 부모요소인 ul에만 리스너를 달아도 자식 li에서 발생한 이벤트를 감지할 수 있습니다.

 

버블링 과정 덕분에:

• 동적 요소에도 적용 가능: 나중에 추가된 자식 요소도 동일하게 부모의 이벤트 리스너가 처리할 수 있습니다.
• 성능 최적화: 많은 자식 요소에 각각 이벤트 리스너를 다는 것보다 부모에 하나만 등록하는 방식이 더 효율적입니다.

이처럼 이벤트 버블링이 자식에서 발생한 이벤트를 부모까지 전달하기 때문에, 부모에서 자식의 이벤트를 위임받아 처리할 수 있는 것입니다.