자바스크립트 마우스 이벤트 4가지 좌표 차이

자바스크립트 마우스 이벤트 4가지 좌표 차이

반응형

자바스크립트 마우스 이벤트 4가지 좌표 차이

자바스크립트 마우스 이벤트와 마우스 이벤트 객체에서 얻어낼 수 있는 3가지 좌표(clientX/Y, pageX/Y, offsetX/Y, screenX/Y)의 차이점에 대해 알아봅니다.

마우스 이벤트 객체

마우스이벤트 인터페이스는 사용자가 포인팅 장치(예: 마우스)와 상호 작용하여 발생하는 이벤트를 나타냅니다. 이 인터페이스를 사용하는 일반적인 이벤트로는 click, dblclick, mousedown 등이 있습니다. 이 인터페이스를 구현한 마우스 이벤트 객체에는 다양한 읽기전용 속성들이 있습니다.

마우스 이벤트 객체 속성들

오늘 포스팅에서는 위에 하이라이트 된 속성들의 차이점에 대해서 알아봅니다.

마우스 이벤트 속성 좌표값 차이점

이미지

4가지 읽기 전용 속성을 통해 얻을 수 있는 값은 동일하다. 바로 X, Y 좌표값이다. X 또는 Y축 값의 크기가 다른 이유는 (0, 0) 원점의 위치가 다르기 때문이다.

MouseEvent.clientX or Y

마우스 이벤트의 클라이언트X 속성은 이벤트가 발생한 응용 프로그램(웹 브라우저)의 뷰포트(위 그림의 오렌지 박스) 내에서 수평 좌표를 제공합니다(페이지 내 좌표가 아닌). (0, 0) 원점은 페이지 최 좌측 상단입니다.

MouseEvent.pageX or Y

마우스 이벤트의 페이지X 또는 Y 속성은 전체 문서의 왼쪽 가장자리를 기준으로 마우스를 클릭한 X(수평) 좌표(픽셀)를 반환합니다. 여기에는 현재 볼 수 없는 문서 부분이 포함됩니다. 만약, 문서가 뷰포트보다 커서 페이지 스크롤이 발생했다 하더라도 원점(0, 0)은 변하지 않습니다.

MouseEvent.offsetX or Y

마우스 이벤트의 오프셋X 또는 Y 속성은 해당 이벤트와 대상 노드의 패딩 가장자리 사이에 마우스 포인터의 X 좌표에 오프셋을 제공합니다.

클릭 이벤트 target 노드가 좌표 원점의 기준이 되고 클릭 이벤트가 발생한 좌표값은 그 원점을 기준으로 X, Y 좌표값이 계산됩니다.

반응형

from http://tamagotch.tistory.com/44 by ccl(A) rewrite - 2021-12-26 14:01:02