-
이벤트 버블링과 캡처링 완벽 정리: 개념부터 활용까지Developer 2025. 1. 31. 09:00728x90
웹 개발을 하다 보면 이벤트(event)와 관련된 개념을 자주 접하게 됩니다. 특히, 이벤트가 요소 간에 어떻게 전파되는지 이해하는 것은 JavaScript에서 DOM을 다룰 때 매우 중요합니다. 이번 포스팅에서는 이벤트 버블링(Event Bubbling)과 이벤트 캡처링(Event Capturing)의 개념, 차이점, 그리고 실전 활용법을 알아보겠습니다.
1. 이벤트 버블링(Event Bubbling)이란?
이벤트 버블링은 자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 과정을 의미합니다. 즉, 이벤트가 발생한 요소에서 시작하여 부모, 조상 요소로 전파됩니다.
예제: 이벤트 버블링 동작 방식
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>이벤트 버블링</title> </head> <body> <div id="parent"> <button id="child">클릭하세요</button> </div> <script> document.getElementById('parent').addEventListener('click', function() { alert('부모 요소 클릭!'); }); document.getElementById('child').addEventListener('click', function() { alert('자식 요소 클릭!'); }); </script> </body> </html>실행 방식:
- 사용자가 #child 버튼을 클릭하면 먼저 자식 요소의 이벤트가 실행됩니다.
- 그 후 이벤트가 부모 요소(#parent)로 버블링되어 부모 요소의 이벤트가 실행됩니다.
이벤트 버블링의 특징
- 이벤트가 자식 → 부모 방향으로 전파됨
- 기본적으로 모든 이벤트는 버블링 방식으로 동작함
- event.stopPropagation()을 사용하면 이벤트 전파를 중단할 수 있음
document.getElementById('child').addEventListener('click', function(event) { event.stopPropagation(); // 부모로 이벤트 전파 방지 alert('자식 요소 클릭! (부모 이벤트 실행 안됨)'); });2. 이벤트 캡처링(Event Capturing)이란?
이벤트 캡처링은 이벤트가 부모 요소에서 시작하여 자식 요소로 전파되는 과정을 의미합니다. 즉, 이벤트 버블링의 반대 방향으로 동작합니다.
예제: 이벤트 캡처링 동작 방식
document.getElementById('parent').addEventListener('click', function() { alert('부모 요소 클릭! (캡처링 단계)'); }, true); // 캡처링 모드 활성화 document.getElementById('child').addEventListener('click', function() { alert('자식 요소 클릭!'); });실행 방식:
- #parent 요소의 이벤트가 먼저 실행됨 (캡처링 단계)
- 이후 #child 요소의 이벤트가 실행됨
이벤트 캡처링의 특징
- 이벤트가 부모 → 자식 방향으로 전파됨
- addEventListener의 세 번째 인자로 true를 전달하면 캡처링 모드가 활성화됨
document.getElementById('parent').addEventListener('click', function() { alert('부모 요소 클릭!'); }, true); // 캡처링 모드 (true 설정)3. 이벤트 버블링 vs 캡처링 비교
구분 이벤트 버블링 (Bubbling) 이벤트 캡처링 (Capturing) 이벤트 전파 방향 자식 → 부모 부모 → 자식 기본 동작 false (기본값) true 설정 필요 활용 예시 이벤트 위임 (Event Delegation) 특정 요소의 이벤트 차단 4. 이벤트 위임(Event Delegation) 활용법
이벤트 버블링을 활용하면 여러 개의 자식 요소에 대해 개별적으로 이벤트 리스너를 설정하는 대신, 부모 요소에 한 번만 이벤트를 등록하는 이벤트 위임(Event Delegation) 기법을 사용할 수 있습니다.
예제: 이벤트 위임
document.getElementById('parent').addEventListener('click', function(event) { if (event.target.tagName === 'BUTTON') { alert(event.target.innerText + ' 버튼 클릭!'); } });- #parent에 이벤트 리스너를 한 번만 설정하여, 모든 자식 button 요소의 클릭 이벤트를 처리할 수 있음
- 동적으로 생성된 요소도 자동으로 이벤트가 적용됨
5. 이벤트 버블링과 캡처링 활용 사례
이벤트 버블링이 유용한 경우
- 이벤트 위임을 사용하여 성능 최적화
- 동적으로 추가되는 요소에도 이벤트 적용 가능
이벤트 캡처링이 유용한 경우
- 부모 요소에서 먼저 특정 이벤트를 감지해야 하는 경우
- stopPropagation()을 통해 특정 요소의 이벤트 실행을 제어해야 하는 경우
6. 결론
이벤트 버블링과 캡처링은 DOM 이벤트 모델의 핵심 개념으로, 이를 이해하면 보다 효율적인 이벤트 처리가 가능합니다. 기본적으로 이벤트 버블링이 일반적으로 사용되지만, 필요에 따라 이벤트 캡처링을 활용할 수도 있습니다. 특히 이벤트 위임(Event Delegation) 기법을 활용하면 성능 최적화와 코드 유지보수성이 향상됩니다.
728x90'Developer' 카테고리의 다른 글
타입스크립트를 사용하는 이유: JavaScript보다 더 나은 선택 (2) 2025.02.02 리액트에서 컴포넌트란? 개념부터 활용까지 완벽 정리 (2) 2025.02.01 CORS(Cross-Origin Resource Sharing): 개념과 필요한 이유 완벽 정리 (0) 2025.01.30 React 동시성 모드(Concurrent Mode): 성능 최적화를 위한 새로운 접근법 (0) 2025.01.29 Webpack과 Rollup: 번들러가 필요한 이유와 동작 원리 완벽 정리 (2) 2025.01.28