[자바스크립트] offsetX, screenX, clientX, pageX, layerX 각각의 차이

 

 

 

 

 

자바스크립트 MouseEvent 실행 시 (e)의 console을 찍어보면 다양한 속성들이 있는데,

이 중 X들을 정리해 보겠다.

 

 

 

 

 

---

 

 

 

 

 

1. offsetX
   • 이벤트가 발생한 요소(Element)를 기준으로 마우스 포인터의 수평(x) 위치를 나타낸다.
   • 이 속성은 주로 이벤트가 발생한 요소 내부에서 상대적인 위치를 파악하는데 사용된다.
   • 요소의 좌측 가장자리를 기준으로 하며, 오른쪽으로 갈수록 양수의 값을 가지고 왼쪽으로 갈수록 음수의 값을 가진다.
   • 요소의 경계를 넘어가면 음수나 요소의 크기보다 큰 양수 값을 가질 수 있다.
   • 스크롤이 발생하면, 요소의 위치가 변경되기 때문에 스크롤에 영향을 받는다. 즉, 스크롤이 발생하면 요소 내부에서의 상대적인 위치가 변하게 된다.
   • 스크롤 up : offsetX 값 증가 / 스크롤 down : offsetX 값 감소
     
     
     
     
2. screenX
   • 모니터 화면을 기준으로 마우스 포인터의 수평(x) 위치를 나타낸다.
   • 모니터 화면 전체를 기준으로 하기 때문에 스크롤 여부와 상관없이 변하지 않는다.
   • 웹페이지 내의 위치와 관계없이, 모니터의 왼쪽 끝에서 오른쪽으로 갈수록 증가하는 값을 가진다.
   • 스크롤과는 관계 없이 모니터 화면 전체를 기준으로 하기 때문에 스크롤에 영향을 받지 않는다.
     
     
     
     
3. clientX
   • 뷰포트(Viewport)를 기준으로 마우스 포인터의 수평(x) 위치를 나타낸다.
   • 뷰포트는 사용자가 현재 볼 수 있는 웹페이지의 영역을 말한다.
   • 웹페이지를 스크롤해도 뷰포트의 크기는 변하지 않는다.
   • 웹페이지의 좌측 끝부터 오른쪽으로 갈수록 증가하는 값을 가진다.
   • 스크롤이 발생하면 뷰포트의 위치가 변하지 않기 때문에 스크롤에 영향을 받지 않는다.
     
     
     
     
4. pageX
   • 문서(Document) 전체를 기준으로 마우스 포인터의 수평(x) 위치를 나타낸다.
   • 문서 전체를 기준으로 하기 때문에 스크롤된 위치도 포함하여 계산한다.
   • 웹페이지 문서의 가장 좌측 끝부터 오른쪽으로 갈수록 증가하는 값을 가진다.
   • 스크롤이 발생하면 문서 전체의 위치가 변경되기 때문에 스크롤에 영향을 받는다.
   • 스크롤 up : offsetX 값 증가 / 스크롤 down : offsetX 값 감소
     
     
     
5. layerX(비표준 속성)
   • 비표준 속성으로, IE 브라우저에 사용되는 속성이다.
   • 현대적인 브라우저들에서는 사용하지 않으며, 대신 offsetX를 사용하는 것을 권장한다.

 

 

 

 

 

 

 

 

 

요약

 

offsetX    : 이벤트가 발생한 요소를 기준으로 한 해당 요소 내부에서의 마우스 포인터의 위치를 나타낸다. (스크롤 영향 ⭕)

screenX  : 모니터 화면을 기준으로 한 마우스 포인터의 위치를 나타낸다. (스크롤 영향 ❌)

clientX    : 뷰포트를 기준으로 한 전체 페이지에서의 마우스 포인터의 위치를 나타낸다. (스크롤 영향 ❌)

pageX     : 문서 전체를 기준으로 한 웹 페이지에서의 마우스 포인터의 위치를 나타낸다. (스크롤 영향 ⭕)

layerX     : (비표준 속성) offsetX를 사용하세요.