이벤트 버블링(Bubbling), 캡쳐링(Capturing)에 대해 설명해주세요.

내용 정리

• 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작하는데, 이런 흐름을 물 속 거품과 닮았다고 해서 이벤트 버블링이라고 부릅니다. focus 이벤트와 같이 버블링 되지 않는 이벤트도 있지만, 거의 모든 이벤트는 버블링이 된다고 볼 수 있습니다. 이벤트 버블링과 반대 방향으로 탐색하는 걸 이벤트 캡쳐링이라고 합니다.
• 프레임워크에 별도의 내장함수나 JavaScript 자체의 stopPropagation()이라는 웹API를 통해서 해당 이벤트가 전파되는 걸 막을 수 있으나 버블링은 이벤트 위임을 통해 사용자의 행동 패턴을 분석하는 등 유용하게 사용될 여지가 있기 때문에 아키텍처를 잘 고려해서 정말 막아야 하는 상황에서만 막는 편이 좋습니다.

꼬리 질문

• 이벤트 버블링을 막지 않고 이벤트 위임을 유용하게 사용될 여지가 있다고 했는데, 혹시 어떤 사례가 있을까요?
  • 실제로 분석에 이용해본 경험은 없지만 예컨대 GA 같은 사용자 패턴 분석 툴이 적용되어 있는 경우 depth가 깊은 메뉴에 있어서 사용자가 하위 메뉴를 클릭했을 때 상위 메뉴까지의 이벤트 위임을 통해서 분석에 활용된다는 사례를 본 적이 있긴 합니다.
• 이벤트 캡처링과 버블링 중에 어떤 것이 우선 동작하나요?
• 이벤트 핸들링을 캡쳐링이 아니라 버블링에서 하는 이유가 무엇인가요?
• 이벤트리스너의 DOM 요소를 찾을 때 캡쳐링의 동작 방식에 대해 설명해주실 수 있을까요?
  • 자바스크립트의 이벤트 모델은 기본적으로 캡쳐링과 버블링 두 단계로 이루어지는데, 이 중 캡쳐링 단계는 이벤트가 최상위 요소에서부터 하위 요소로 향하는 단계입니다. 따라서 특별한 설정을 하지 않아도 이벤트가 발생하면 캡쳐링 단계도 일어납니다. 이벤트 리스너를 등록할 때 addEventListener 함수의 세 번째 매개변수로 전달하는 useCapture 매개변수를 true로 설정하면, 해당 이벤트 리스너는 캡쳐링 단계에서 호출됩니다. 그러나 useCapture 매개변수를 생략하거나 false로 설정하면, 기본적으로는 이벤트 리스너가 버블링 단계에서 호출됩니다. 다시 말해, 캡쳐링이 발생하지 않는다는 것이 아니라, useCapture 매개변수를 명시적으로 true로 설정하지 않으면 기본적으로는 버블링 단계에서 이벤트가 처리된다는 것이 맞습니다.

참고자료

• https://ko.javascript.info/bubbling-and-capturing
• https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
• JS중급 - 자바스크립트 웹 개발 기본기 by 코드잇