JavaScript 마우스 좌표 얻기 – mousemove 이벤트 활용 방법

웹 페이지에서 사용자의 마우스 위치를 실시간으로 추적하는 것은 드래그 앤 드롭, 커스텀 커서, 인터랙티브 요소 등 다양한 기능을 구현할 때 필수적인 기술입니다. JavaScript에서는 mousemove 이벤트와 이벤트 객체의 x, y 속성을 활용하면 아주 간단하게 마우스 좌표를 얻을 수 있습니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample {
        font-size: 25px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>Coordinates of mouse</h1>
<p class="sample"></p>
<h3>Hover the mouse over the screen to get its x and y axis position</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    document.body.addEventListener("mousemove", (event) => {
        sampleEle.innerHTML = "X axis: " + event.x + " Y axis: " + event.y;
    });
</script>
</body>
</html>

코드 설명

document.querySelector(".sample") : 화면에 좌표를 표시할 <p> 요소를 선택합니다.
document.body.addEventListener("mousemove", ...) : body 영역 전체에서 마우스가 움직일 때마다 콜백 함수가 실행되도록 이벤트 리스너를 등록합니다.
event.x / event.y : 브라우저 뷰포트(화면)를 기준으로 하는 마우스 포인터의 X축, Y축 좌표 값입니다. 참고로 이 값은 clientX, clientY 속성과 동일한 값을 반환합니다.
sampleEle.innerHTML : 선택된 요소의 내용을 최신 마우스 좌표로 업데이트하여 실시간 출력을 구현합니다.

실행 결과

위 코드를 실행한 후 화면 위에서 마우스를 움직이면, 마우스 포인터의 현재 X축과 Y축 좌표가 실시간으로 화면에 표시됩니다.

JavaScript 마우스 좌표 얻기 – mousemove 이벤트 활용 방법

만약 스크롤까지 포함된 문서(document) 전체 기준의 좌표가 필요하다면, pageX와 pageY 속성을 대신 사용하면 됩니다. 상황에 따라 적절한 좌표계를 선택하는 것이 중요합니다.