웹 개발을 하다보면 이벤트 캡처링과 이벤트 버블링에 대해 들어본 적이 있을 것입니다. 이 두 개념은 이벤트가 DOM에서 전파되는 방식에 대한 것으로, 이해하면 웹 애플리케이션 개발에 많은 도움이 될 것입니다.

이벤트 버블링

기본적으로 이벤트 버블링은 이벤트가 발생한 요소로부터 시작해 부모 요소를 거슬러 올라가면서 전파됩니다. 즉, 하위 요소에서 상위 요소로 이벤트가 전파되는 것을 의미합니다. 이것은 HTML 요소가 중첩된 구조에서 유용하게 사용됩니다.

예를 들어, 다음과 같은 HTML이 있다고 가정해봅시다.

<div>
  <p>Hello</p>
</div>

여기서 <p> 요소를 클릭할 때 이벤트가 발생하면, 클릭 이벤트는 <p>에서 <div>로 버블링 됩니다.

이벤트 캡처링

이벤트 캡처링은 반대 개념으로, 이벤트가 발생한 부모 요소로부터 시작해 하위 요소로 전파됩니다. 이렇게 하위 요소에서 상위 요소로 이벤트가 전파되는 방식은 잘 사용되지는 않지만, 이벤트 버블링과 함께 더 많은 이해를 도울 수 있습니다.

예제

다음은 간단한 HTML과 JavaScript 예제입니다.

<div id="outer">
  <div id="inner">
    Button
  </div>
</div>

document.getElementById('outer').addEventListener('click', () => {
  console.log('Outer div clicked');
}, true); // capturing phase

document.getElementById('inner').addEventListener('click', () => {
  console.log('Inner div clicked');
}, false); // bubbling phase

위 예제에서 capturing phase로 이벤트를 설정하면, 버블링과 캡처링의 차이를 더 명확히 이해할 수 있을 것입니다.

이러한 이벤트 전파 방식에 대한 이해는 코드를 디버그하고 원하는 동작을 구현하는 데 도움이 될 것입니다.

더 많은 정보를 원하시면 다음 링크를 참고해주세요. Events - MDN Web Docs

이상으로 이벤트 캡처링과 이벤트 버블링에 대한 간단한 소개였습니다.