개발일지

이벤트 캡쳐와 버블링이란?

다음과 같이 스택된 엘리먼트들이 있을 때, 정 중앙 사각형을 클릭하면 브라우저는 이 이벤트를 어떻게 처리할까요?

물론 사용자의 의도는 정중앙의 사각형을 클릭하는 것이었겠지만,
브라우저는 사용자가 window를 클릭한 것인지, 가장 바닥의 엘리먼트를 클릭한 것인지 구분할 수 없습니다.
따라서 브라우저는 사용자가 클릭한 엘리먼트를 기준으로 window를 포함한 그 엘리먼트의 모든 부모노드에 이벤트를 통지합니다.

부모 노드가 자식 노드에게 이벤트를 전달하는 과정에서 발생하는 이벤트의 흐름을 ‘이벤트 캡쳐’라고 부릅니다.
자식 노드가 부모 노드에게 이벤트를 전달하는 과정에서 발생하는 이벤트의 흐름을 ‘이벤트 버블링’이라고 부릅니다.

이벤트 캡쳐와 버블링의 실제 구현

Element.addEventListener함수를 사용하면, 기본적으로 이벤트 핸들러가 이벤트 버블링에 반응합니다.
document.getElementById('box1').addEventListener('click',function(e){//이벤트 버블링에 반응});

Element.addEventListener함수의 세번째 인자에 true를 넘기면, 이벤트 핸들러가 이벤트 캡쳐에 반응하게 됩니다.
document.getElementById('box1').addEventListener('click',function(e){//이벤트 캡쳐에 반응},true);

이벤트 핸들러는 이벤트 버블링, 캡쳐 둘 중 하나에만 반응할 수 있습니다.
거기다 addEventListener함수를 사용할 수 없는 IE9이하의 브라우져에서는 이벤트 캡쳐를 사용할수 없습니다.
따라서 이벤트 버블링에 반응하는 이벤트 핸들러만 사용하는 것이 일반적입니다.

아래의 예제 코드에는 이벤트 캡쳐에 반응하는 이벤트 핸들러와 이벤트 버블링에 반응하는 이벤트 핸들러를 모두 등록했습니다.
따라서 엘리먼트를 클릭하면 이벤트 캡쳐에는 빨간색, 이벤트 버블링에는 녹색으로 반응하는 것을 확인할 수 있습니다.
예제 코드 다운로드는 이곳에서 확인하세요.

See the Pen 이벤트 버블링과 캡쳐 by cinos (@shoveller) on CodePen.