웹 개발을 하다 보면 사용자의 마우스 위치를 주기적으로 추적해야 하는 경우가 종종 있습니다. 이번 글에서는 JavaScript의 mousemove 이벤트와 setInterval() 함수를 활용하여 지정된 간격(예: 3초)마다 마우스 좌표를 캡처하는 방법을 예제와 함께 살펴보겠습니다.
동작 원리
이 기능은 두 가지 핵심 요소로 구성됩니다.
- mousemove 이벤트: 마우스가 움직일 때마다 발생하며, 이때
event.clientX와event.clientY로 현재 좌표를 얻을 수 있습니다. - setInterval() 함수: 지정한 시간(밀리초 단위)마다 특정 함수를 반복 실행하여, 저장해 둔 최신 좌표를 주기적으로 화면에 출력합니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>일정 간격마다 마우스 위치 캡처하기</h1>
<div class="result"></div>
<button class="Btn">여기를 클릭하세요</button>
<h3>위 버튼을 클릭하면 3초마다 마우스 위치 캡처가 시작됩니다</h3>
<script>
let resultEle = document.querySelector(".result");
let check;
let xCoord, yCoord;
document.body.addEventListener("mousemove", function (event) {
xCoord = event.clientX;
yCoord = event.clientY;
});
function displayCoordinate(element) {
resultEle.innerHTML =
"X 좌표 = " + xCoord + "<br> Y 좌표 = " + yCoord;
}
document.querySelector(".Btn").addEventListener("click", () => {
setInterval(displayCoordinate, 3000);
});
</script>
</body>
</html>코드 상세 설명
- mousemove 리스너: document.body에 등록되어 마우스가 움직이는 동안 실시간으로 X, Y 좌표를 각각
xCoord,yCoord변수에 저장합니다. - displayCoordinate() 함수: 저장된 좌표 값을
.result요소의 innerHTML에 문자열 형태로 출력합니다. - 버튼 클릭 이벤트: 버튼을 누르면
setInterval(displayCoordinate, 3000)이 실행되어 3초(3000밀리초)마다 최신 마우스 위치가 화면에 갱신됩니다.
실행 결과
아래는 페이지가 처음 로드된 초기 화면입니다.
“여기를 클릭하세요” 버튼을 클릭하면 3초마다 마우스 위치가 자동으로 캡처되어 화면에 표시됩니다.
마무리
이처럼 mousemove 이벤트로 좌표를 지속적으로 갱신하고, setInterval()로 원하는 주기마다 출력하면 간단하게 마우스 위치 추적 기능을 구현할 수 있습니다. 인터벌 간격을 조정하거나 캡처된 좌표를 배열에 저장하는 방식으로 확장하면 마우스 궤적 분석, 사용자 행동 로깅 등 다양한 기능으로 응용할 수 있습니다.