이벤트 버블링과 캡쳐링, 이벤트 위임

 

 

 

웹 개발에서 이벤트 처리는 사용자 인터랙션을 다루는 핵심적인 부분이다

이벤트 버블링(Event Bubbling), 이벤트 캡쳐링(Event Capturing), 그리고 이벤트 위임(Event Delegation)은 이벤트를 효율적으로 처리하는 데 사용되는 세 가지 중요한 개념이다

 

이벤트 버블링 (Event Bubbling)

이벤트 버블링은 특정 이벤트가 발생했을 때, 해당 이벤트가 더 상위의 부모 요소로 전파되는 현상을 말한다

예를 들어, HTML 문서에서 버튼을 클릭하는 이벤트가 발생하면, 이 이벤트는 먼저 해당 버튼에서 발생하고, 그 후에는 버튼을 포함하고 있는 부모 요소로, 그리고 그 부모의 부모 요소로 계속해서 전파된다

이 과정은 최상위 요소(document)에 도달할 때까지 계속된다

 

이벤트 캡쳐링 (Event Capturing)

이벤트 캡쳐링(또는 이벤트 캡처링)은 이벤트 버블링과 반대 방향으로 작동한다

이벤트가 최상위 요소에서 시작하여 발생한 요소로 내려가는 과정이다

이벤트 캡쳐링은 DOM 이벤트 흐름의 첫 번째 단계이다

이벤트 캡쳐링 단계에서는 일반적으로 많은 작업이 수행되지 않지만,

특정 상황에서 이벤트를 더 일찍 잡아내기 위해 사용될 수 있다

 

이벤트 위임 (Event Delegation)

이벤트 위임은 이벤트 버블링을 활용하는 기법이다

여러 자식 요소에 동일한 이벤트 핸들러를 개별적으로 추가하는 대신,

하나의 부모 요소에 이벤트 핸들러를 추가하고 이벤트가 발생한 자식 요소를 식별하는 방식이다

이벤트 위임을 사용하면 동적으로 요소가 추가되거나 제거될 때도 별도의 이벤트 핸들러를 추가하거나 제거할 필요가 없어 코드를 간결하게 유지할 수 있으며, 메모리 사용을 줄일 수 있다

예시:

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

<script>
  document.getElementById('parent-list').addEventListener('click', function(e) {
    if(e.target.tagName === 'LI') {
      alert(`Item clicked: ${e.target.textContent}`);
    }
  });
</script>

 

위 예시에서는 <ul> 요소에 하나의 클릭 이벤트 리스너만 추가하여 모든 <li> 요소의 클릭 이벤트를 처리한다

이벤트가 <li> 요소에서 발생하면 버블링을 통해 <ul> 요소로 전파되고,

이벤트 핸들러에서 이벤트가 발생한 실제 요소(e.target)를 확인하여 처리한다

 

이벤트 버블링, 캡쳐링, 위임은 모두 이벤트를 효율적으로 관리하고,

웹 애플리케이션의 사용자 인터랙션을 더 잘 제어하기 위한 중요한 개념들이다