본문 바로가기
Tech/DOM

[MouseEvent] clientX, offsetX, pageX, screenX

by egas 2021. 7. 23.

clientX, clientY

MouseEvent 인터페이스의 clientX(읽기 전용 속성)은 이벤트가 발생한 응용 프로그램의 viewport 안의 수평 좌표를 제공한다. (clientX는 수직 좌표)

 

  • 예를 들어, viewport의 왼쪽 가장자리를 클릭하면 페이지가 수평으로 스크롤되는지 여부에 관계없이 항상 clientX값이 0인 마우스 이벤트가 발생한다.
  • clientX: viewport에서의 x좌표 위치 반환
  • clientY: viewport에서의 y좌표 위치 반환

offsetX, offsetX

MouseEvent 인터페이스의 offsetX(읽기 전용 속성)은 해당 이벤트와 대상 노드의 패딩을 포함한 가장자리 사이에 있는 마우스 포인터의 X 좌표를 제공한다. 

 

  • offsetX: 이벤트 대상 객체에서의 상대적 마우스 x좌표 위치를 반환
  • offsetY: 이벤트 대상 객체에서의 상대적 마우스 y좌표 위치를 반환

pageX, pageY

MouseEvent 인터페이스의 pageX(읽기 전용 속성)은 전체 문서의 왼쪽 가장자리를 기준으로 마우스를 클릭한 X(가로) 좌표(픽셀)를 반환한다. 여기에는 현재 표시되지 않는 문서의 모든 부분이 포함된다.

  • pageX: 브라우저 문서에서의 x좌표 위치를 반환
  • pageY: 브라우저 문서에서의 Y좌표 위치를 반환

screenX, screenY

MouseEvent 인터페이스의 screenX 읽기 전용 속성은 전역(모니터) 좌표에서 마우스 포인터의 수평 좌표를 제공한다. (참고: 다중 화면 환경에서 가로로 정렬된 화면은 단일 장치로 처리되므로 screenX값 의 범위가 화면의 결합 너비로 증가한다.)

 

  • screenX: 모니터에서의 x좌표 위치 반환
  • screenY: 모니터에서의 y좌표 위치 반환 
728x90

'Tech > DOM' 카테고리의 다른 글

DOM Level 3 Events  (0) 2021.08.07
HTMLElement  (0) 2021.08.02
DOMString  (0) 2021.07.31
This value was evaluated upon first expanding. it may have changed since then.  (0) 2021.07.31
classList  (0) 2021.07.31

댓글