SyntheticEvent

기본 동작

DOM 이벤트 전파

캡처링 → 타겟 → 버블링 순서

캡처링 단계

캡처링 단계에서는 이벤트가 루트에서 시작해 이벤트가 발생한 요소까지 내려감

버블링 단계

버블링 단계는 이벤트가 발생한 요소에서 다시 루트로 전파됨.

둘 중 하나만 발생하게 하는 경우

• 캡처링만 사용하고 버블링을 막고 싶다면, stopPropagation을 캡처링 단계에서 호출하여 버블링으로의 전파를 차단할 수 있다.
• 반대로, 버블링만 사용하고 싶다면 캡처링 단계를 무시하고 일반적인 이벤트 핸들러(onClick)등을 사용하면 된다.

React에서의 사용 예시

• onClickCapture와 같은 캡처 이벤트 핸들러를 사용하면 캡처링 단계에서만 이벤트를 처리할 수 있고, onClick은 버블링 단계에서만 이벤트를 처리함
• 이벤트 전파를 완전히 멈추려면 stopPropagation을 호출하여 두 단계 모두에서 전파를 차단할 수 있다.

캡처 이벤트(capture event)