자바스크립트 MouseEvent 실행 시 (e)의 console을 찍어보면 다양한 속성들이 있는데,
이 중 X들을 정리해 보겠다.
- offsetX
- 이벤트가 발생한 요소(Element)를 기준으로 마우스 포인터의 수평(x) 위치를 나타낸다.
- 이 속성은 주로 이벤트가 발생한 요소 내부에서 상대적인 위치를 파악하는데 사용된다.
- 요소의 좌측 가장자리를 기준으로 하며, 오른쪽으로 갈수록 양수의 값을 가지고 왼쪽으로 갈수록 음수의 값을 가진다.
- 요소의 경계를 넘어가면 음수나 요소의 크기보다 큰 양수 값을 가질 수 있다.
- 스크롤이 발생하면, 요소의 위치가 변경되기 때문에 스크롤에 영향을 받는다. 즉, 스크롤이 발생하면 요소 내부에서의 상대적인 위치가 변하게 된다.
- 스크롤 up : offsetX 값 증가 / 스크롤 down : offsetX 값 감소
- screenX
- 모니터 화면을 기준으로 마우스 포인터의 수평(x) 위치를 나타낸다.
- 모니터 화면 전체를 기준으로 하기 때문에 스크롤 여부와 상관없이 변하지 않는다.
- 웹페이지 내의 위치와 관계없이, 모니터의 왼쪽 끝에서 오른쪽으로 갈수록 증가하는 값을 가진다.
- 스크롤과는 관계 없이 모니터 화면 전체를 기준으로 하기 때문에 스크롤에 영향을 받지 않는다.
- clientX
- 뷰포트(Viewport)를 기준으로 마우스 포인터의 수평(x) 위치를 나타낸다.
- 뷰포트는 사용자가 현재 볼 수 있는 웹페이지의 영역을 말한다.
- 웹페이지를 스크롤해도 뷰포트의 크기는 변하지 않는다.
- 웹페이지의 좌측 끝부터 오른쪽으로 갈수록 증가하는 값을 가진다.
- 스크롤이 발생하면 뷰포트의 위치가 변하지 않기 때문에 스크롤에 영향을 받지 않는다.
- pageX
- 문서(Document) 전체를 기준으로 마우스 포인터의 수평(x) 위치를 나타낸다.
- 문서 전체를 기준으로 하기 때문에 스크롤된 위치도 포함하여 계산한다.
- 웹페이지 문서의 가장 좌측 끝부터 오른쪽으로 갈수록 증가하는 값을 가진다.
- 스크롤이 발생하면 문서 전체의 위치가 변경되기 때문에 스크롤에 영향을 받는다.
- 스크롤 up : offsetX 값 증가 / 스크롤 down : offsetX 값 감소
- layerX(비표준 속성)
- 비표준 속성으로, IE 브라우저에 사용되는 속성이다.
- 현대적인 브라우저들에서는 사용하지 않으며, 대신 offsetX를 사용하는 것을 권장한다.
요약
offsetX : 이벤트가 발생한 요소를 기준으로 한 해당 요소 내부에서의 마우스 포인터의 위치를 나타낸다. (스크롤 영향 ⭕)
screenX : 모니터 화면을 기준으로 한 마우스 포인터의 위치를 나타낸다. (스크롤 영향 ❌)
clientX : 뷰포트를 기준으로 한 전체 페이지에서의 마우스 포인터의 위치를 나타낸다. (스크롤 영향 ❌)
pageX : 문서 전체를 기준으로 한 웹 페이지에서의 마우스 포인터의 위치를 나타낸다. (스크롤 영향 ⭕)
layerX : (비표준 속성) offsetX를 사용하세요.
728x90
반응형
'Web > javascript' 카테고리의 다른 글
[자바스크립트] scrollIntoView() (0) | 2024.06.25 |
---|---|
[자바스크립트] filter (1) | 2023.11.27 |
[자바스크립트] textContent와 innerText 차이 (0) | 2023.05.02 |
[자바스크립트] 전개연산자 (0) | 2023.04.25 |
[자바스크립트] DOMContentLoaded, load 차이 (0) | 2023.04.14 |