JavaScript 이벤트 버블링과 캡처링 개념 비교

JavaScript의 이벤트 버블링과 캡처링: 개념과 차이점

웹 개발에서 이벤트 처리 과정은 필수적인 요소입니다. JavaScript로 웹 애플리케이션을 구현할 때, 사용자와의 상호작용을 관리하기 위해서 이벤트를 적절히 활용해야 합니다. 이 과정에서 ‘이벤트 버블링’과 ‘이벤트 캡처링’이라는 두 가지 중요한 개념이 존재합니다. 이 글에서는 이 두 개념을 명확히 이해하고, 그 차이점을 살펴보겠습니다.

이벤트 버블링이란?

이벤트 버블링은 특정 요소에서 발생한 이벤트가 그 요소의 부모 요소로 전파되는 과정을 말합니다. 예를 들어, 만약 하위 요소인 버튼을 클릭한다면, 그 버튼에 바인딩된 이벤트 핸들러가 실행된 이후, 이어서 그 버튼의 부모 요소로 이벤트가 전파되어 해당 부모에 설정된 이벤트 핸들러가 차례로 작동합니다. 이와 같은 과정은 최상위 HTML 요소까지 계속 진행됩니다.

이벤트 버블링의 일반적인 흐름은 다음과 같습니다:

• 버튼 클릭 → 버튼의 핸들러 실행
• 버튼의 부모 요소 핸들러 실행
• 부모의 부모 요소 핸들러 실행
• 최종적으로 document 객체에 도달

이러한 전파 방식은 매우 유용합니다. 여러 요소에 대한 이벤트 관리를 단순화시켜주기 때문입니다. 특히 하위 요소에서 발생한 이벤트를 상위 요소에서 처리할 수 있는 이벤트 위임(Event Delegation) 기법과 결합하여 더욱 효율적인 코드를 작성할 수 있습니다.

이벤트 캡처링이란?

반면, 이벤트 캡처링은 이벤트가 발생한 요소에 도달하기 전에 최상위 요소에서부터 시작하여 아래로 전파되는 과정을 의미합니다. 즉, 클릭 이벤트가 발생하면 최상위 부모 요소부터 시작하여 하위 자식 요소로 향하는 방식입니다. 이 과정은 기본적으로 드물게 사용되지만, 특정 상황에서는 유용하게 활용될 수 있습니다.

이벤트 캡처링의 흐름은 다음과 같습니다:

• document 객체 → 부모 요소 핸들러 실행
• 부모의 부모 요소 핸들러 실행
• 버튼의 핸들러 실행

버블링과 캡처링의 실전 코드 예제

두 가지 이벤트 전파 방식을 비교하기 위해 아래 코드를 살펴보겠습니다. 이 예제에서는 각각의 요소에 클릭 이벤트를 추가하여 어떤 흐름으로 이벤트가 처리되는지 확인할 수 있습니다.

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');
const button = document.querySelector('button');
function parentClick() {
 alert('부모 요소가 클릭되었습니다!');
}
function childClick() {
 alert('자식 요소가 클릭되었습니다!');
}
function buttonClick() {
 alert('버튼이 클릭되었습니다!');
}
// 버블링 방식
parent.addEventListener('click', parentClick);
child.addEventListener('click', childClick);
button.addEventListener('click', buttonClick);

위의 코드에서 버튼을 클릭하면, 이벤트는 다음과 같은 순서로 진행됩니다: 버튼 → 자식 요소 → 부모 요소. 이처럼 이벤트는 아래에서 위로 전파되며, 각 요소의 핸들러가 차례로 실행됩니다.

버블링과 캡처링의 제어

JavaScript에서는 이벤트 처리 시 버블링과 캡처링의 방향을 제어할 수 있습니다. 기본적으로 이벤트는 버블링 방식으로 전파되지만, 이를 캡처링 방식으로 전환할 수도 있습니다. 이를 위해 addEventListener 메서드를 사용할 때 세 번째 인자로 true를 전달하면 됩니다.

// 캡처링 방식으로 이벤트 등록
parent.addEventListener('click', parentClick, true);
child.addEventListener('click', childClick, true);
button.addEventListener('click', buttonClick, true);

이렇게 하면 이벤트는 부모 요소부터 하위 요소로 전파됩니다. 즉, 이벤트의 흐름이 반대로 진행됩니다.

이벤트 전파 중단 방법

종종 이벤트의 전파가 불필요할 때가 있습니다. 이럴 경우 event.stopPropagation() 메서드를 사용하면 이벤트의 전파를 중단할 수 있습니다. 예를 들어, 버튼 클릭 시 부모 요소의 이벤트가 실행되는 것을 막고 싶다면, 버튼 핸들러 안에 이 메서드를 호출하면 됩니다.

function buttonClick(event) {
 alert('버튼이 클릭되었습니다!');
 event.stopPropagation(); // 이벤트 전파 중단
}

이 코드를 실행하면 버튼을 클릭했을 때 버튼의 핸들러만 호출되고, 자식이나 부모 요소의 핸들러는 실행되지 않습니다.

결론

JavaScript의 이벤트 처리에서 버블링과 캡처링은 중요한 개념으로, 각기 다른 방식으로 이벤트가 전파되는 과정을 이해하는 것이 필수적입니다. 두 가지 방식은 개발자에게 다양한 이벤트 관리 전략을 제공하며, 적절한 상황에서 적합한 방식을 사용함으로써 더 나은 웹 애플리케이션을 개발할 수 있습니다. 또한, 이벤트 전파를 중단할 수 있는 메서드를 활용하면 보다 정교한 이벤트 처리가 가능해집니다. 이러한 지식을 바탕으로 여러분의 JavaScript 실력을 한층 더 발전시킬 수 있을 것입니다.

자주 찾는 질문 Q&A