대상 요소와 그 상위 요소에 같은 이벤트가 있을 때 단계 간의 구분이 중요해진다. 버블링 모드에서는 이벤트가 가장 내부에 있는 대상 요소에서 이벤트를 캡처한 후, 대상 요소의 부모 요소를 시작으로 외부의 상위 요소로 이벤트가 전파된다. 캡처 모드에서는 이벤트가 가장 바깥 쪽의 요소에 의해 캡처된 후 내부 요소로 전파된다.

캡처 단계를 위한 이벤트 리스너를 등록할 때는 이벤트 이름 뒤에 Capture를 추가하여 작성한다. 예를 들어 마우스오버 이벤트의 캡처 단계를 처리하려면, onMouseOver라고 쓰는 대신 onMouseOverCapture라고 쓴다. 표 6-1에서 다룬 모든 이벤트 이름에 Capture를 추가해서 사용할 수 있다.

예를 들어 버블링을 포함한 일반적인 이벤트와 캡처 이벤트가 있는 <div>가 있다고 가정해보자. 각각의 이벤트를 onMouseOver, onMouseOverCapture로 정의한다.

 

예제 코드 6.2 캡처 이벤트에 이어지는 버블링 이벤트

class Mouse extends React.Component {
    render() {
        return <div>
            <div
                style={{border: '1px solid red'}}
                onMouseOverCapture={((event) => {
                    console.log('mouse over on capture event')
                    console.dir(event, this)}).bind(this)}
                onMouseOver={((event) => {
                    console.log('mouse over on bubbling event')
                    console.dir(event, this)}).bind(this)}>
                    Open DevTools and move your mouse cursor over here
            </div>
        </div>
    }
}

---