12. DOM과 이벤트 처리-3

#3 이벤트 버블링과 캡처링

이벤트 버블링과 캡처링은 이벤트가 일어난 요소에서 상위 요소로 전파되는 방식을 의미합니다. 이벤트 버블링은 이벤트가 발생한 요소에서 시작하여 부모 요소를 거쳐 최상위 요소까지 이벤트가 전파되는 방식입니다. 즉, 가장 하위 요소에서 이벤트가 시작되어 상위 요소로 이벤트가 전파되는 것입니다. 이벤트 캡처링은 이벤트 버블링과 반대로 최상위 요소에서 시작하여 하위 요소로 이벤트가 전파되는 방식입니다. 즉, 가장 상위 요소에서 이벤트가 시작되어 하위 요소로 이벤트가 전파되는 것입니다.

 

이벤트 버블링

이벤트 버블링은 이벤트가 발생한 요소에서 시작하여 부모 요소를 거쳐 최상위 요소까지 이벤트가 전파되는 방식입니다. 이벤트 버블링은 DOM 트리의 구조와 일치합니다. 즉, DOM 요소의 가장 하위 요소에서 이벤트가 시작되어 가장 상위 요소까지 이벤트가 전파됩니다.

<div id="parent">
  <div id="child">
    <button id="button">Click me!</button>
  </div>
</div>

const button = document.getElementById('button');
const child = document.getElementById('child');
const parent = document.getElementById('parent');

button.addEventListener('click', function() {
  console.log('button clicked');
});

child.addEventListener('click', function() {
  console.log('child clicked');
});

parent.addEventListener('click', function() {
  console.log('parent clicked');
});

위 예제 코드에서는 button, child, parent 요소에 클릭 이벤트 리스너를 등록하였습니다. button 요소를 클릭하면 button clicked가 출력됩니다. 이후 이벤트가 child 요소로 전파되면 child clicked가 출력됩니다. 다시 이벤트가 parent 요소로 전파되면 parent clicked가 출력됩니다.

 

이벤트 캡처링

이벤트 캡처링은 이벤트가 발생한 요소에서 가장 먼 조상 요소부터 이벤트를 처리하는 방식입니다. 캡처링 단계에서는 최상위 요소에서부터 이벤트가 발생한 요소까지 내려오면서 이벤트를 처리합니다.

예를 들어, 아래와 같은 HTML 코드가 있다고 가정해봅시다.

<div id="outer">
  <div id="inner">
    Click me!
  </div>
</div>

이때 inner 요소에서 click 이벤트가 발생했을 경우, 이벤트 캡처링 단계에서는 outer 요소부터 시작하여 inner 요소까지 내려오면서 이벤트를 처리하게 됩니다.

이벤트 캡처링 단계에서 이벤트를 처리하는 이벤트 리스너는 다음과 같이 등록할 수 있습니다.

const outer = document.querySelector('#outer');
outer.addEventListener('click', function() {
  console.log('캡처링 단계 - outer');
}, true);

const inner = document.querySelector('#inner');
inner.addEventListener('click', function() {
  console.log('캡처링 단계 - inner');
}, true);

캡처링 단계에서 등록한 이벤트 리스너의 실행 순서는 등록한 순서와 반대입니다. 즉, 위의 코드에서는 outer 요소에서 등록한 이벤트 리스너가 먼저 실행되고, 그 다음에 inner 요소에서 등록한 이벤트 리스너가 실행됩니다.

이벤트 캡처링 단계가 끝나면 이제 이벤트가 발생한 요소에서부터 버블링 단계가 시작됩니다.