JavaScript 이벤트 흐름: 버블링과 캡처링 차이

JavaScript 이벤트 흐름 이해하기: 버블링과 캡처링

JavaScript에서 이벤트 처리의 기초는 이벤트 흐름을 이해하는 것입니다. 이벤트 흐름은 사용자 인터페이스의 상호작용이 발생할 때 DOM의 특정 요소에서 이벤트가 어떻게 전달되는지를 설명합니다. 특히 중요한 개념이 바로 ‘버블링’과 ‘캡처링’입니다. 이번 글에서는 이 두 가지를 자세히 살펴보겠습니다.

버블링(Bubbling) 이란?

버블링은 이벤트가 발생한 요소에서 시작하여 그 상위 요소로 전파되는 과정을 의미합니다. 예를 들어, 버튼을 클릭하면 해당 버튼에서 시작해 부모 요소, 조상 요소로 이벤트가 전달됩니다. 이러한 전파는 마치 물속에서의 거품처럼 아래에서 위로 올라가는 형태를 취합니다. 이 과정에서 각 요소에 등록된 이벤트 핸들러가 차례로 실행되므로, 클릭한 요소에서부터 가장 바깥쪽의 요소에 이르기까지 모든 요소의 이벤트 리스너가 작동하게 됩니다.

이벤트 흐름의 단계

이벤트 흐름은 크게 세 가지 단계로 나뉩니다.

• 캡처링 단계 (Capturing Phase): 이벤트가 최상위 요소에서 시작하여 지정된 타겟 요소로 하향 전파되는 단계입니다. 이때는 상위 요소에서 하위 요소로 이벤트가 전달됩니다.
• 타겟 단계 (Target Phase): 이벤트가 실제로 발생한 요소에서 실행되는 단계입니다. 이 단계에서는 타겟 요소에서만 이벤트가 처리됩니다.
• 버블링 단계 (Bubbling Phase): 타겟 요소에서 시작해 다시 상위 요소로 이벤트가 전파되는 단계입니다. 이 과정에서 이벤트 리스너가 상위 요소에서 차례로 실행됩니다.

버블링의 예시

다음은 이벤트 버블링의 동작을 보여주는 간단한 JavaScript 예제입니다.

const parent = document.getElementById("parent");
const child = document.getElementById("child");
// 부모 요소에 이벤트 리스너 추가
parent.addEventListener("click", () => {
  console.log("부모 클릭됨");
});
// 자식 요소에 이벤트 리스너 추가
child.addEventListener("click", () => {
  console.log("자식 클릭됨");
});

버튼을 클릭하면 “자식 클릭됨”이라는 메시지가 출력된 후 “부모 클릭됨”이 출력됩니다. 이는 자식 요소에서 시작하여 부모 요소로 이벤트가 전파되었기 때문입니다.

버블링 방지하기

때때로 버블링이 필요하지 않은 상황이 있을 수 있습니다. 이 경우 stopPropagation() 메서드를 사용하여 이벤트 전파를 중단할 수 있습니다. 아래와 같은 코드로 설정 가능하며, 자식 요소에서 부모 요소로의 이벤트 흐름을 차단합니다.

child.addEventListener("click", (event) => {
  console.log("자식 클릭됨"); 
  event.stopPropagation(); // 이벤트 전파 중단
});

위 코드를 실행하면 버튼을 클릭하더라도 부모 요소의 이벤트 핸들러는 호출되지 않습니다.

버블링 vs 캡처링

버블링과 캡처링은 전파 방향에서 큰 차이를 보입니다. 버블링은 하위 요소에서 상위 요소로 전파되며, 캡처링은 그 반대로 상위 요소에서 하위 요소로 이벤트가 전달됩니다. 기본적으로 JavaScript의 대부분의 이벤트는 버블링 방식으로 처리되지만, 캡처링을 사용하려면 addEventListener의 세 번째 매개변수를 true로 설정해야 합니다.

• 버블링: 하위 요소 → 상위 요소
• 캡처링: 상위 요소 → 하위 요소

또한 addEventListener의 기본값이 버블링임을 기억해야 합니다. 따라서 캡처링을 위해서는 명시적으로 설정해야 합니다.

결론

JavaScript의 이벤트 흐름인 버블링과 캡처링은 웹 개발에서 매우 중요한 개념입니다. 이벤트가 어떻게 전파되는지 이해함으로써, 개발자는 더 효율적인 코드 작성과 보다 나은 사용자 경험을 제공할 수 있습니다. 이벤트 처리에 관한 기본 개념을 숙지하고, 버블링과 캡처링을 적절히 활용하여 최적의 결과를 만들어보시기 바랍니다.

자주 묻는 질문과 답변