[자바스크립트] 이벤트 버블링, 캡처링, 위임

• 이벤트 버블링 (Event Bubbling): 이벤트가 발생한 요소에서부터 부모 요소로 순차적으로 전파되는 현상입니다. 마치 물수제비를 던졌을 때 물결이 퍼져나가는 것처럼, 이벤트가 발생한 요소에서 시작하여 최상위 요소까지 전달됩니다.
• 이벤트 캡처링 (Event Capturing): 이벤트 버블링과 반대로, 이벤트가 최상위 요소에서부터 자식 요소로 순차적으로 전파되는 현상입니다. 즉, 최상위 요소에서 이벤트를 먼저 처리하고, 점차 하위 요소로 내려가면서 처리합니다.
• 이벤트 위임 (Event Delegation): 특정 요소에 이벤트 리스너를 등록하여, 그 요소의 자손 요소에서 발생하는 이벤트를 간접적으로 처리하는 기법입니다. 이벤트 버블링을 활용하여 구현됩니다.

다양한 예시 및 속성 값

1. 이벤트 버블링 예시

<div id="outer">
  <div id="middle">
    <button id="inner">버튼</button>
  </div>
</div>

const innerButton = document.getElementById('inner');
const middleDiv = document.getElementById('middle');
const outerDiv = document.getElementById('outer');

innerButton.addEventListener('click', () => {
  console.log('innerButton 클릭');
});

middleDiv.addEventListener('click', () => {
  console.log('middleDiv 클릭');
});

outerDiv.addEventListener('click', () => {
  console.log('outerDiv 클릭');
});

 

버튼을 클릭하면 innerButton, middleDiv, outerDiv 순으로 콘솔에 출력됩니다.

2. 이벤트 캡처링 예시

innerButton.addEventListener('click', () => {
  console.log('innerButton 클릭');
}, { capture: true });

capture: true 옵션을 사용하여 캡처링 방식으로 이벤트를 처리하면, outerDiv, middleDiv, innerButton 순으로 콘솔에 출력됩니다.

3. 이벤트 위임 예시

 

<ul id="list">
  <li>아이템1</li>
  <li>아이템2</li>
  <li>아이템3</li>
</ul>

const list = document.getElementById('list');

list.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log(event.target.textContent + ' 클릭');
  }
});

 

ul 태그에 이벤트 리스너를 등록하고, event.target을 통해 클릭된 요소를 확인하여 처리합니다.

4. 관련 속성 값

• event.target: 이벤트가 발생한 요소를 가리킵니다.
• event.currentTarget: 이벤트 리스너가 등록된 요소를 가리킵니다.
• event.stopPropagation(): 이벤트 버블링을 중단시킵니다.
• event.stopImmediatePropagation(): 동일한 요소에서 발생한 다른 이벤트 핸들러의 실행을 중단시킵니다.

심화 학습 및 활용

• 이벤트 루프: 이벤트가 발생하고 처리되는 과정을 이해하면 이벤트 버블링, 캡처링, 위임의 작동 원리를 더 깊이 파악할 수 있습니다.
• CustomEvent: 사용자 정의 이벤트를 생성하여 복잡한 이벤트 시스템을 구축할 수 있습니다.
• EventTarget Interface: 모든 DOM 노드가 상속하는 인터페이스로, 이벤트 관련 메서드를 제공합니다.
• Event Composition: 이벤트 버블링과 캡처링을 조합하여 복잡한 이벤트 시나리오를 처리할 수 있습니다.

실제 웹 애플리케이션에서의 활용

• 동적 콘텐츠: 무한 스크롤, 댓글 시스템 등에서 이벤트 위임을 활용하여 효율적으로 이벤트를 처리합니다.
• 웹 컴포넌트: 커스텀 컴포넌트 내부에서 이벤트 캡처링과 버블링을 활용하여 내부 로직과 외부 통신을 처리합니다.
• Drag-and-drop: 이벤트 버블링을 활용하여 드롭 가능 영역을 찾고, 캡처링을 활용하여 드래그 시작 시 특정 작업을 수행할 수 있습니다.

주의 사항

• 성능: 이벤트 캡처링은 모든 요소를 순회해야 하므로 성능에 영향을 줄 수 있습니다. 특정 상황에서만 사용하는 것이 좋습니다.
• 브라우저 호환성: 모든 브라우저에서 완벽하게 지원되지 않을 수 있습니다.
• 이벤트 위임: 너무 많은 이벤트를 위임하면 성능 저하가 발생할 수 있습니다.