이벤트 버블링과 캡처링에 대해 설명해주세요
이벤트 버블링(Event Bubbling)과 캡처링(Event Capturing)은 웹 개발에서 이벤트 처리 방식을 설명하는 용어입니다. 이 두 용어는 HTML 문서 내에서 이벤트가 전파되는 방향을 나타냅니다.
이벤트 버블링
이벤트 버블링(Event Bubbling)은 특정 요소에서 발생한 이벤트가 해당 요소의 부모 요소로 전파되는 방식을 말합니다. 즉, 이벤트가 발생한 요소에서 시작해 부모 요소, 그리고 그 부모 요소의 상위 요소로 이벤트가 전파됩니다. 예를 들어, 다음과 같은 HTML 구조가 있다고 가정해봅시다.
<div id="outer">
<div id="inner">
<button id="button">Click me!</button>
</div>
</div>여기서 버튼(<button>)을 클릭했을 때, 버튼에서 발생한 클릭 이벤트는 버튼 자체뿐만 아니라 버튼의 부모 요소인 <div id="inner">로도 전파되고, 그 다음에는 버튼의 부모의 부모인 <div id="outer">로 전파됩니다. 이벤트 버블링은 이러한 방식으로 이벤트가 전파되는 것을 말합니다.
이벤트 캡처링
이벤트 캡처링(Event Capturing)은 이벤트 버블링과는 반대로, 이벤트가 상위 요소에서 시작하여 하위 요소로 전파되는 방식을 말합니다. 즉, 이벤트가 발생한 요소의 상위 요소부터 시작하여 하위 요소로 이벤트가 전파됩니다. 이벤트 캡처링은 이벤트 버블링과는 달리 상위 요소부터 이벤트가 전파되기 때문에 캡처링 단계라고도 불립니다.
이벤트 캡처링과 이벤트 버블링은 DOM(Document Object Model)의 이벤트 처리 방식을 설명하는데 사용되며, 이벤트 핸들러를 등록할 때 옵션 객체({ capture: true } 또는 { capture: false })를 통해 원하는 전파 방식을 지정할 수 있습니다. 기본적으로는 이벤트 버블링이 적용되며, 이벤트 캡처링을 사용하려면 옵션 객체에서 capture: true로 설정해야 합니다.
간단히 말하면, 이벤트 버블링은 하위 요소에서 상위 요소로, 이벤트 캡처링은 상위 요소에서 하위 요소로 이벤트가 전파된다는 것을 기억하시면 됩니다.
이벤트 발생 순서
- 이벤트가 최상위 조상에서 시작해 아래로 전파되고(캡처링 단계)
- 이벤트가 타깃 요소에 도착해 실행된 후(타깃 단계)
- 다시 위로 전파됩니다.(버블링 단계)
