Event bubbling 과 capturing 을 비교하여 설명해주실 수 있을까요?
캡처링은 이벤트가 하위 요소로 전파되는 것이고 버블링은 상위 요소로 전파되는 것이다.
표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있는데,
1단계는 캡처링, 2단계는 타깃, 3단계는 버블링이다.
요소(태그)를 클릭했을 때 과정을 보면,
이벤트가 최상위 조상에서 시작해 아래로 전파되는 캡처링 단계로 시작해,
이벤트가 타깃 요소에 도착해 실행되는 타깃 단계 후, 다시 위로 전파되는 버블링 단계를 거친다.
이런 과정을 통해 요소에 할당된 이벤트 핸들러가 호출된다.
버블링(bubbling)의 원리는 간단하다.
한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고,
이어서 부모 요소의 핸들러가 동작한다.
가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다.
"거의" 모든 이벤트는 버블링 되지만 focus 이벤트와 같이 버블링 되지 않는 이벤트도 있다.
캡처링(capturing)은 버블링의 반대이다.
window 부터 이벤트가 발생한 요소까지 이벤트를 전파한다.
캡처링 단계를 이용해야 하는 경우는 흔하지 않으나 종종 유용한 경우가 있다.
.
참고 글
버블링과 캡처링
개발 공부