웹 페이지에서 사용자의 상호작용을 인식하고 응답하기 위해 이벤트가 발생합니다. 이벤트가 발생하는 순서를 이해하는 것은 웹 개발자에게 매우 중요합니다.

1. 버블링과 캡처링

자바스크립트는 이벤트 전파 방식으로 버블링(bubbling)과 캡처링(capturing)을 사용합니다.

• 캡처링: 최상위 요소에서 시작하여 하위 요소로 이벤트가 전파됩니다.
• 버블링: 하위 요소에서 시작하여 최상위 요소로 이벤트가 전파됩니다.

2. 예제

다음은 클릭 이벤트의 버블링과 캡처링의 동작을 설명하는 간단한 예제 코드입니다.

// HTML
<div id="container">
  <button id="btn">Click me</button>
</div>

// JavaScript
const container = document.getElementById('container');
const button = document.getElementById('btn');

container.addEventListener('click', function() {
  console.log('Container clicked');
}, true); // capturing 으로 등록

button.addEventListener('click', function() {
  console.log('Button clicked');
}, true); // capturing 으로 등록

위 코드에서 container와 button의 이벤트 핸들러를 capturing 단계에서 등록했으므로, 상위 요소인 container의 이벤트 핸들러가 먼저 실행됩니다.

3. 요약

자바스크립트의 이벤트 전파 방식과 버블링/캡처링의 동작을 이해하면, 웹 애플리케이션에서 발생하는 이벤트에 대해 효율적으로 대응할 수 있습니다.

더 자세한 내용은 MDN Web Docs를 참고하세요.