• clientX, clientY: 현재 웹 브라우저 페이지 내에서의 x, y 좌표를 가리킵니다(픽셀 단위).
• pageX, pageY: 현재 웹 브라우저 페이지 내에서의 x, y 좌표를 가리키지만, 스크롤이 있으면 스크롤한 픽셀 값까지 포함합니다.
• offsetX, offsetY: 이벤트를 연결한 대상을 기준으로 마우스의 x, y 좌표를 가져옵니다.
• screenX, screenY: 모니터를 기준으로 모니터 왼쪽 모서리가 0이 됩니다.
• movementX, movementY: 지난 mousemove 이벤트와 비교해 얼마나 마우스를 움직였는지 표시합니다. mousemove 이벤트일 때만 실제 값이 잡힙니다.
이러한 값을 활용하는 예제를 하나 살펴보겠습니다. 마우스 버튼을 클릭한 채로 마우스를 움직이고(드래그 동작과 유사), 버튼에서 손을 떼는 순간에 마우스가 위, 아래, 왼쪽, 오른쪽 중에서 어느 방향으로 움직이는지 콘솔에 출력해 봅니다.