[JavaScript] 이벤트 버블링과 캡쳐링이 무엇인지 알아봅시다.

📖 들어가며

자바스크립트의 핵심 개념 중 하나인 이벤트 버블링과 캡쳐링에 대해서 알아보겠습니다.

버블링(Bubbling)

이벤트 버블링이란 무엇일까요?

한 요소에 이벤트가 발생하면, 해당 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 해당 과정이 반복이 됩니다.

 

버블링 과정

간단한 아래 코드 예제를 보면 바로 이해가 될 것입니다.

가장 안쪽에 있는 p태그를 클릭했는데 3개의 핸들러가 동작하는 게 보이시나요?

1.  p에 할당된 onclick 핸들러 실행
2. 바깥의 div에 할당된 핸들러 실행
3. 그 바깥의 form에 할당된 핸들러 실행
4. documnet 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작합니다.

마찬가지로 div를 클릭하면 div -> form 순으로 핸들러가 실행되는 모습을 볼 수 있습니다.

이와 같이 이런 흐름을 '이벤트 버블링'이라고 부릅니다.

이벤트가 제일 깊은 곳에 있는 요소부터 부모 요소를 타고 올라오는 모습이 마치 거품(bubble)과 닮았기 때문이라고 합니다.

캡쳐링(Capturing)

캡쳐링은 버블링과 반대 방향으로 이벤트 전파가 진행됩니다.

위 코드는 이벤트 캡쳐링 코드입니다. 이 코드도 역시 '전체' 핸들러에 할당해서 어떤 핸들러가 동작하게 되는지 보여주는 코드입니다.

(코드샌드박스 내 메뉴의 자바스크립트 파일에 이벤트 리스너를 정의했습니다.)

for (let elem of document.querySelectorAll("*")) {
        elem.addEventListener(
          "click",
          (e) => alert(`캡쳐링: ${elem.tagName}`),
          true
        );
        elem.addEventListener("click", (e) => alert(`버블링: ${elem.tagName}`));
 }

p를 클릭하면 아래의 순서와 같이 이벤트가 전달됩니다.

1. html -> body -> form -> div (캡쳐링, 첫 번째 이벤트 리스너)
2. p (타깃 단계, 캡쳐링과 버블링 둘 다 이벤트 리스너에 설정했기 때문에 두 번 호출됩니다.)
3. div -> form -> body -> html (버블링, 두 번째 이벤트 리스너)

capture 옵션은 두 가지 옵션을 가질 수 있습니다.

이벤트 리스너의 세 번째 매개변수로 {capture: true} 또는 true (capture 생략 가능)

• false => (default 값) 핸들러는 버블링 단계에서 시작합니다.
• true이면 핸들러는 캡쳐링 단계부터 시작합니다.

이벤트 흐름

이벤트 흐름

이벤트 흐름엔 총 3가지 단계가 있습니다.

1. 캡쳐링 단계 => 이벤트가 하위 요소로 전파되는 단계
2. 타깃 단계 => 실제 타깃 요소에 전달되는 단계
3. 버블링 단계 => 이벤트가 상위 요소로 전파되는 단계

이벤트 흐름 2

event.target과 event.currnetTarget

부모 요소의 핸들러는 이벤트가 정확히 어디서 발생했는지 등 자세한 정보를 가지고 있습니다.

그럼 event. target과 event.currntTarget은 무슨 차이가 있을까요?

• event.target은 실제로 이벤트가 시작된 요소입니다.
• event.currentTarget은 '현재' 요소로, 현재 실행 중인 핸들러가 할당된 요소입니다.

이벤트 전파 막기

event.stopPropagation()

이벤트 객체의 메서드인 stopPropagation()을 사용하면 이벤트 전파를 막을 수 있습니다.

event.stopPropagation();

따라서, 이벤트 버블링의 경우 해당 핸들러의 이벤트를 처리하고 버블링을 중단하도록 할 수 있습니다.

event.stopImmediatePropagation()

stopPropagation() 메서드는 현재 요소에서 더 이상의 이벤트 전파(버블링 및 캡쳐링)을 막아주지만, 다른 핸들러들이 동작하는 건 막지 못합니다.
이벤트 전파를 멈추고, 요소에 할당된 다른 핸들러들의 동작도 막을 때에는 stopImmediatePropagation() 메서드를 사용합니다.

(번외) React에서 이벤트 버블링?

Vanilla JavaScript에서는 버블링이 일어나는 상황을 쉽게 맞이할 수 있습니다.

하지만, 개인적으로 React로 개발을 할 때에도 핸들러를 할당해 주는데 이벤트 버블링이 일어나는 상황을 느끼지 못하여 더 알아보았습니다.

SynthenticEvent

React에서 이벤트 버블링이 발생하지 않는 것처럼 느껴지는 이유는 React가 자체적인 이벤트 시스템을 가지고 있기 때문인데요.

이를 'SynthenticEvent'라고 부릅니다.

React의 'SynthenticEvent's는 웹 브라우저의 네이티브 이벤트를 감싸는 Wrapper로, 모든 이벤트가 최상단에서 단 한 번만 처리됩니다.

이벤트 핸들러를 직접적으로 요소에 붙이지 않고, 최상위 노드에서 이벤트 위임을 통해 모든 이벤트를 감지하고 처리합니다. 이러한 이유로 React 컴포넌트 내에서 이벤트 버블링이 발생하지 않는 것처럼 보이는 것입니다.

하지만 실제로 이벤트 버블링은 일어납니다.

SynthenticEvent가 캡처를 하고, 적절한 컴포넌트에 분배하고, 따라서 React의 SynthenticEvent가 네이티브 이벤트를 모방하기 때문에 stopPropagaion()을 사용하여 이벤트 버블링을 막을 수 있습니다.

📕 마무리

이벤트 캡쳐링과 버블링을 활용하면 이벤트 핸들링 패턴인 이벤트 위임을 구현할 수 있습니다.

이벤트 위임을 사용하면 요소마다 핸들러를 일일이 핸들러를 할당하지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식입니다.

이벤트 위임에 대해서는 캡쳐링과 버블링에 대한 개념만 숙지하고 있으면 당장 사용할 수 있을 정도의 패턴이고 매우 유용한 패턴입니다.

해당 글에서 다루지는 않았습니다.

 

참고문헌:

• https://ko.javascript.info/bubbling-and-capturing
• https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
• https://blog.cloudboost.io/why-react-discourage-event-delegation-2b5fe3f52bea