[JavaScript] 버블링과 캡처링

🥕 이벤트 버블링

버블링은 한 요소에 이벤트가 발생되면, 그 요소의 부모 요소의 이벤트도 같이 발생되는 이벤트 전파를 말한다. 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문에 명명 지어졌다.

 

브라우저의 이벤트는 기본적으로 버블링 방식으로 이벤트가 전파된다.\

// false 생략 가능
element.addEventListener('click', (e) => { ... }, false);

 

자바스크립트 addEventListener() 함수로 요소의 이벤트를 등록하면 기본적으로 버블링 전파 방식으로 이벤트가 흐르게 되어, 만일 자식 요소에 이벤트가 발생하면 부모 요소도 버블링 통해 이벤트가 전파되어 리스너가 호출되게 된다.

 

*거의 모든 이벤트는 버블링이 된다고 보면 된다. 다만 focus 이벤트와 같이 버블링 되지 않는 이벤트도 존재하기도 한다.

 

버블링은 안쪽에서 바깥쪽으로 이벤트가 전파 되는 흐름이다.

🥕 이벤트 캡처링

캡처링은 한 요소에 이벤트가 발생되면, 그 요소의 자손 요소의 이벤트도 같이 발생되는 이벤트 전파를 말한다. 한마디로 버블링 반대라고 볼 수 있다. 다만, 실무에서 자주 쓰이지는 않지만 가끔 유용한 경우가 있어 알아볼 필요가 있다.

 

브라우저의 이벤트 전파 방식은 버블링이 기본값이기 때문에 캡처링으로 설정하기 위해선 별도의 옵션을 함수에 주어야 한다. 자바스크립트 addEventListener() 함수의 3번째 매개변수로 true 값을 주면 이 이벤트 타겟은 캡처링을 통해 이벤트를 전파받아 호출되게 된다.

element.addEventListener('click', (e) => { ... }, true);
element.addEventListener('click', (e) => { ... }, {capture: true});

 

이렇게 옵션 설정을 통해 버블링 or 캡처링 이벤트 전파 동작으로 등록하는 이유는, 브라우저는 캡쳐링으로 탐색하고 버블링으로 돌아오는데 갔다가 돌아오는 과정에서 이벤트가 똑같이 두번 실행하기 때문이다.

 

캡처링은 반대로 바깥쪽에서 안쪽으로 이벤트가 전파 되는 흐름이다.