return (
<div
onClickCapture={handleCapture}
style={{ padding: '50px', backgroundColor: '#f0f0f0' }}
>Parent
<button onClick={handleBubble} style={{ marginTop: '20px' }}
>Click Me</button>
</div>
);
}
코드에서 <button> 요소를 클릭하면 onClick 이벤트가 발생합니다. 이때 부모 요소인 <div>에 onClickCapture 속성이 정의되어 이벤트가 자식 요소로 도달하기 전에 부모의 캡처링 핸들러가 먼저 실행됩니다. 즉, 이벤트는 부모 → 자식 방향으로 전파됩니다.
애플리케이션을 실행하고 버튼을 클릭합니다. 웹 브라우저의 콘솔창을 보면 Parent → Child 순으로 로그가 남습니다.