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

이번 포스팅에서는 이벤트 버블링과 캡쳐링에 대해서 다뤄보겠습니다.

이벤트 버블링(Bubbling)

버블링이란 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 계속해서 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작하는 것을 말합니다.

See the Pen Untitled by MinJaeHong (@jaehong94) on CodePen.

위에 예시를 클릭해보면

• P 상자를 클릭할 경우: P -> DIV -> FORM -> Body -> HTML 순으로 알림 창이 뜨는 것을 확인할 수 있습니다.
• DIV 상자를 클릭할 경우는 DIV 부터 HTML 순으로 알림 창이 뜹니다.

이러한 현상, 클릭한 요소에서 최상단 요소까지 이벤트를 전파하는 방식을 이벤트 버블링(Bubbling)이라고 합니다.

이벤트 캡쳐링(Capturing)

캡쳐링은 버블링에 반대 개념입니다. 한 요소에서 이벤트가 발생하면 최상단의 요소부터 처음 발생한 요소까지 핸들러가 동작하는 것을 말합니다.

See the Pen Untitled by MinJaeHong (@jaehong94) on CodePen.

위에 말했던 것처럼 캡쳐링은 버블링에 반대이므로 HTML -> BODY -> ... 순으로 클릭한 요소까지 이벤트가 전파됩니다.

버블링과 캡쳐링의 차이점

버블링과 캡쳐링의 차이점은 간단히 말해 이벤트 핸들러의 출발 순서입니다. 버블링은 이벤트가 발생한 요소에서 최상단 요소에 도착하고 캡쳐링은 Window에서 시작해서 이벤트가 발생한 요소에서 끝납니다.

출처: 모던 자바스크립트

버블링과 캡쳐링 막기

이벤트가 전파하는 것을 막기위해서 존재하는 웹 API가 있습니다. 바로 event.stopPropagation()입니다.

See the Pen Untitled by MinJaeHong (@jaehong94) on CodePen.

event.stopPropagation()을 사용하면 이벤트가 발생한 요소에서만 핸들러가 작동하고 이벤트가 전파되는 것을 막습니다.

---

캡쳐링을 사용할 일은 거의 없을 것 같지만 버블링이 사용될 때는 많기 때문에 개념 정도는 알고 있으면 좋을 것 같습니다.