[JavaScript] 이벤트 버블링(Event Bubbling)과 이벤트캡쳐(Event Capturing)

자바스크립트에서 이벤트 버블링(Event Bubbling)과 이벤트 캡처(Event Capturing)은 이벤트가 여러 개의 요소에 영향을 미치는 방식을 설명하는 용어입니다.

 

1. 이벤트 버블링(Event Bubbling)

이벤트 버블링은 특정 요소에서 이벤트가 발생했을 때, 해당 요소가 포함된 부모 요소로 이벤트가 전파되는 현상

즉, 이벤트가 가장 깊은 자식 요소에서 시작하여 부모 요소를 거슬러 올라가면서 처리되는 것을 의미합니다.

이벤트 버블링은 DOM 트리 구조를 따라 이벤트가 전파되기 때문에, 최상위 부모 요소까지 이벤트가 전달될 수 있습니다. 이러한 특성을 활용하면 이벤트 위임(Event Delegation)이라는 패턴을 사용하여 여러 요소에 대한 이벤트 핸들링을 효율적으로 처리할 수 있습니다.

 

2. 이벤트 캡처(Event Capturing)

이벤트 캡처는 이벤트 버블링과는 반대로, 최상위 부모 요소에서 시작하여 이벤트가 발생한 요소까지 이벤트가 전파되는 현상입니다. 이벤트 캡처는 이벤트가 전파되는 경로를 따라 이벤트를 처리하는 방식으로, 이벤트 캡처 단계에서 추가적인 처리를 할 수 있습니다. 하지만 기본적으로 이벤트 캡처 단계는 사용되지 않고, 주로 이벤트 버블링 단계에서 이벤트를 처리하는 것이 일반적입니다. 이벤트 버블링과 이벤트 캡처는 자바스크립트의 이벤트 모델에서 이벤트 전파의 방향과 순서를 설명하는 개념입니다. 이벤트 버블링은 대부분의 브라우저에서 기본적으로 활성화되어 있으며, 이벤트 캡처는 addEventListener 메서드의 세 번째 인자를 `true`로 설정하여 사용할 수 있습니다. 아래는 이벤트 버블링과 이벤트 캡처를 보여주는 예제입니다. 

 

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

<script>
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const button = document.getElementById('button');

outer.addEventListener('click', function() {
  console.log('Outer element clicked');
}, false); // 이벤트 버블링

inner.addEventListener('click', function() {
  console.log('Inner element clicked');
}, false); // 이벤트 버블링

button.addEventListener('click', function() {
  console.log('Button clicked');
}, false); // 이벤트 버블링
</script>

 

위 예제에서 버튼을 클릭하면 콘솔에는 다음과 같은 순서로 로그가 출력됩니다.

1. Button clicked

2. Inner element clicked

3. Outer element clicked

이벤트가 버블링되면서 최하위 요소인 버튼에서 시작하여 상위 요소로 전파되는 것을 확인할 수 있습니다. 이벤트 버블링과 이벤트 캡처는 이벤트의 전파 방식을 이해하는 데 중요한 개념이며, 웹 애플리케이션에서 이벤트 핸들링을 구현할 때 유용하게 활용될 수 있습니다. 

 

3. 이벤트 버블링 사용 시 주의할 점

1. 이벤트 핸들러 중복 실행

이벤트 버블링은 이벤트가 상위 요소로 전파되는 동안 중첩된 요소들까지 이벤트 핸들러가 실행될 수 있습니다. 이 경우, 중복 실행을 방지하기 위해 이벤트 핸들러 내에서 event.stopPropagation() 을 호출하여 이벤트 전파를 중지시킬 수 있습니다.

 

2. 이벤트 위임 시 주의

이벤트 위임은 이벤트 버블링을 활용하여 상위 요소에서 하위 요소들의 이벤트를 처리하는 패턴입니다. 하지만 이벤트 위임을 사용할 때는 주의해야 합니다. 만약 상위 요소에 여러 개의 하위 요소가 있고, 이벤트 핸들러가 모든 하위 요소에 적용되는 경우에는 원하지 않는 요소에서도 이벤트가 발생할 수 있습니다. 이 경우에는 이벤트 핸들러 내에서 이벤트를 발생시킨 요소를 확인하고 처리해야 합니다.

 

3. 이벤트 캡처 단계 활용

이벤트 버블링과 함께 이벤트 캡처 단계를 활용하여 이벤트를 처리할 수 있습니다. 이벤트 캡처 단계에서 추가적인 처리를 할 수 있기 때문에, 이벤트가 상위 요소로 전파되기 전에 필요한 작업을 수행할 수 있습니다.

이 경우에는 addEventListener 메서드의 세 번째 인자를 true로 설정하여 이벤트 캡처 단계에서 이벤트 핸들러를 등록해야 합니다.

 

4. 성능 고려

이벤트 버블링은 DOM 트리를 따라 상위 요소로 전파되기 때문에, 이벤트 핸들러가 많은 요소들에 등록되어 있다면 성능에 영향을 줄 수 있습니다. 따라서, 이벤트 핸들러의 등록을 최소화하고 필요한 요소에만 등록하는 것이 좋습니다.