예를 들어, 클릭 이벤트에는 PointerEvent 객체가 전달됩니다. 그래서 앞의 코드를 실행해 보면 콘솔창에 이벤트 객체가 출력됩니다.
그림 12-43 클릭 이벤트의 PointerEvent 객체
실행결과를 보면 이벤트 객체에는 발생한 이벤트에 대한 다양한 정보가 속성으로 포함되어 있습니다. 이 중에서 유용하게 사용할 수 있는 속성은 다음과 같습니다.
표 12-10 PointerEvent 객체의 주요 속성
|
속성 |
설명 |
|
clientX |
마우스가 클릭된 x좌표(수평 스크롤 포함 X) |
|
clientY |
마우스가 클릭된 y좌표(수직 스크롤 포함 X) |
|
pageX |
마우스가 클릭된 x좌표(수평 스크롤 포함 O) |
|
pageY |
마우스가 클릭된 y좌표(수직 스크롤 포함 O) |
|
screenX |
모니터의 왼쪽 위 모서리를 기준으로 마우스가 클릭된 x좌표 |
|
screenY |
모니터의 왼쪽 위 모서리를 기준으로 마우스가 클릭된 y좌표 |