자바스크립트 여러가지 종류의 좌표 찾기 (screenX, screenY, pageX, pageY, clientX, clientY, offsetX, offsetY)

자바스크립트 (JavaScript)

 

자바스크립트 여러가지 종류의 좌표 찾기 (Vanilla JavaScript Coordinates) 입니다.

자바스크립트에서 좌표의 종류는 크게 4가지로 분류됩니다.

---

1. screenX, screenY

• 사용자의 모니터 화면을 기준으로 한 좌표를 표시
• 사용자의 모니터의 왼쪽 상단 모서리가 (0, 0)

 

2. pageX, pageY

• 브라우저 전체 페이지를 기준으로 좌표를 표시
• 가로나 세로 스크롤이 생기는 경우 스크롤이 될때마다 해당 pageX, pageY의 좌표값은 변경

 

3. clientX, clientY

• 브라우저에서 사용자에게 웹페이지가 보여지는 영역을 기준으로 좌표를 표시
• 스크롤바가 움직여도, 특정 지점의 clientX, clientY의 값은 동일

 

4. offsetX, offsetY

• 좌표를 출력하도록 하는 이벤트가 걸려있는 DOM node를 기준으로 좌표를 표시
• 특정 요소의 영역에서 offsetX, offsetY를 출력하면, 해당 요소의 왼쪽 상단 모서리가 (0, 0)

---

이해하기 더 쉽도록 위 4가지 종류의 좌표를 가지고 구현한 예제입니다.

 

See the Pen 마우스 이벤트 (MouseEvent) by kimyangsun (@kimyangsun) on CodePen.