[JavaScript] Event 버블링과 캡처링
이벤트 버블링이란
자바스크립트에서 이벤트가 발생한 자식 요소에서 시작해 부모 요소로 전파되는 방식이다. 물 속에서 발생한 기포 방울(Bubble)이 아래에서 위로 올라가는 이미지를 연상하면 쉽다. 즉, 가장 구체적인 요소에서 이벤트가 발생하면 그 이벤트가 상위 요소들로 차례차례 전달된다.
예를 들어, <div> 안에 있는 <button>을 클릭하면, 해당 버튼에 연결된 이벤트가 먼저 실행되고, 그 이벤트는 부모 요소인 <div>로 전파된다.
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
document.getElementById('child').addEventListener('click', () => {
console.log('버튼 클릭됨');
});
document.getElementById('parent').addEventListener('click', () => {
console.log('부모 div 클릭됨');
});
</script>이 코드를 실행하면 버튼을 클릭할 때, "버튼 클릭됨"과 "부모 div 클릭됨"이 차례대로 출력된다. 이는 이벤트가 자식 요소에서 부모 요소로 전파되기 때문이다.
이벤트 캡처링이란
이벤트 캡처링(Event Capturing)은 버블링과 반대되는 개념이다. 이벤트가 부모 요소에서 시작해 자식 요소로 전달된다. 자바스크립트에서는 기본적으로 이벤트 버블링이 먼저 일어나지만, 캡처링 단계를 사용하려면 addEventListener 메서드의 세 번째 인자로 true를 전달하면 된다.
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
document.getElementById('parent').addEventListener('click', () => {
console.log('부모 div 클릭됨');
}, true);
document.getElementById('child').addEventListener('click', () => {
console.log('버튼 클릭됨');
});
</script>이 코드를 실행하면 버튼을 클릭했을 때 "부모 div 클릭됨"이 먼저 출력되고, 그 다음에 "버튼 클릭됨"이 출력된다. 이는 캡처링 단계에서 부모 이벤트가 먼저 처리되기 때문이다.
차이점
버블링과 캡처링은 이벤트가 전파되는 순서에 따라 구분된다. 버블링은 자식 요소에서 부모 요소로 이벤트가 전달되는 방식이고, 캡처링은 부모 요소에서 자식 요소로 이벤트가 전달된다. 자바스크립트는 기본적으로 버블링 방식을 사용하지만, addEventListener의 옵션을 통해 캡처링을 적용할 수 있다.
혼합 사용 예시
<div id="outer">
<div id="inner">
<button id="btn">Click Me</button>
</div>
</div>
<script>
document.getElementById('outer').addEventListener('click', () => {
console.log('외부 div 클릭됨');
}, true); // 캡처링
document.getElementById('inner').addEventListener('click', () => {
console.log('내부 div 클릭됨');
});
document.getElementById('btn').addEventListener('click', () => {
console.log('버튼 클릭됨');
});
</script>버튼을 클릭하면 "외부 div 클릭됨"이 먼저 출력되고, 그 다음에 "버튼 클릭됨", 마지막으로 " 내부 div 클릭됨"이 출력된다. 이처럼 캡처링과 버블링이 차례로 일어나며 이벤트가 전파되는 과정을 확인할 수 있다.