예제 코드 6.2의 Mouse 컴포넌트를 다시 살펴보면 부모 요소를 통한 이벤트 위임에 대해 알 수 있다. Mouse 컴포넌트에는 마우스오버 이벤트를 처리하는 <div> 엘리먼트가 있는데, 여기서 이벤트를 추적해보자.

Chrome이나 Firefox의 개발자 도구를 열고, Elements 탭 또는 Inspector(검사기) 탭에서 data-reactroot 요소를 선택하고(또는 Chrome이나 Firefox의 문맥 메뉴에서 요소 검사를 이용해도 좋다), 개발자 도구의 콘솔에서 $0를 입력하고 Enter를 누르면 <div>에 접근할 수 있다. 알아두면 좋은 요령이다.

신기하게도 DOM 노드인 <div>에는 연결된 이벤트 리스너가 없다. 그림 6-5에서 $0는 <div>이며, reactroot 요소다. 특정 DOM 노드(<div> 요소)에 연결된 이벤트 리스너를 확인하려면 개발자 도구 콘솔에서 전역 메서드인 getEventListeners($0)를 실행한다.