[JS] 이벤트 버블링(Event Bubbling), 이벤트 캡처링(Event Capturing)

이벤트 버블링(Event Bubbling)

• 이벤트가 발생한 요소에서부터 최상위 요소(Html)로 위로 올라가서 동작하는 것
• 가장 최상단의 조상 요소를 만날 때까지 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작함
• 버튼을 클릭하면 클릭 이벤트가 버튼에서 시작하여 부모 요소로 전파
• 거의 모든 이벤트는 버블링됨
• focus 이벤트와 같이 버블링 되지 않는 이벤트도 있음
• +) 원래 HTML에서는 focus 이벤트가 버블링되지 않지만, 리액트에서는 focus 이벤트 버블링됨. 리액트에서는 자체적으로 이벤트 시스템을 가지고 있어서 가능

 

 

이벤트 캡처링(Event Capturing)

• 이벤트가 DOM 트리의 최상위 요소(Html)에서부터 시작하여 실제 이벤트가 발생한 요소로 내려가는 것
• 캡처링 단계에서 이벤트를 감지하며, 이후에는 버블링 단계에서 이벤트를 처리
• 실제 코드에서 자주 쓰이진 않지만 종종 유용한 경우가 있음
• 캡처링 단계 > 타겟 단계 > 버블링 단계 순
• 캡처링 단계(이벤트가 하위요소로 전파되는 단계)
• 타겟 단계(타겟 요소에 도달, 타겟 요소에 할당된 이벤트 핸들러가 실행되는 단계)
• 버블링 단계(이벤트가 타겟 요소부터 최상위 부모 요소까지 전파, 이벤트 핸들러가 호출되는 단계)

 

 

https://ko.javascript.info/bubbling-and-capturing

버블링과 캡처링