JavaScript에서 마우스 위치 추적
JavaScript에서 마우스 움직임을 추적하기 위해 이벤트 리스너를 사용합니다. 이벤트 리스너는 발생하는 변경 사항을 계속 수신하는 것입니다. 예를 들어 mousedown 이벤트는 사용자가 마우스 버튼을 클릭할 때만 트리거됩니다.
JavaScript에서 사용할 수 있는 다양한 마우스 이벤트가 있으며 그 중 마우스 위치를 추적하기 위해 mousemove 이벤트에 중점을 둘 것입니다. 마우스 이벤트의 전체 목록을 보려면 마우스 이벤트 MDN 문서를 방문하세요.
JavaScript에서 마우스 이벤트를 추적하는 다양한 방법
마우스 위치를 추적하려면 브라우저 탭에서 x축(수평 위치)과 y축(수직 위치)을 찾아야 합니다. 브라우저의 왼쪽 상단 모서리가 (0,0)으로 표시된다는 것을 알 수 있습니다. 마우스를 수평으로 움직이면 x 위치가 변경되고, 수직으로 마우스를 이동하면 y 위치가 변경됩니다.
브라우저 탭 내에서 마우스의 x 및 y 위치를 가져오는 두 가지 다른 방법이 있으며 이러한 방법은 다음과 같습니다.
- 웹페이지의 크기를 기준으로 마우스 위치를 추적하려면
pageX및pageY를 사용합니다. - 화면의 가시 영역을 기준으로 마우스 위치를 추적하려면
clientX및clientY를 사용합니다.
JavaScript에서 PageX, PageY 및 clientX, clientY를 사용하여 마우스 위치 추적
아래의 예를 통해 이 두 가지를 모두 이해합시다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 1000px;">Div with height 1000px...</div>
<script src="./script.js"></script>
</body>
</html>
여기에 HTML 문서가 있습니다. body 태그 내부에는 div 요소와 일부 텍스트가 있고 height는 1000px입니다. 이 div 요소에 이만큼 높이를 부여한 이유가 있습니다. div에 이만큼 높이를 제공하면 웹 페이지 내부에 스크롤 막대가 표시되며 이는 마우스 움직임을 추적하는 위의 두 가지 방법을 모두 설명하는 데 필요합니다.
그런 다음 아래 스크립트를 HTML 문서에 연결하는 스크립트 태그가 있습니다.
function mousemove(event) {
console.log(
'pageX: ', event.pageX, 'pageY: ', event.pageY,
'clientX: ', event.clientX, 'clientY:', event.clientY)
}
window.addEventListener('mousemove', mousemove);
스크립트 파일의 addEventListener 함수를 사용하여 창 개체에 mousemove 이벤트를 추가했습니다. 이 함수는 두 개의 매개변수를 사용합니다. 첫 번째 매개변수는 추가하려는 이벤트입니다. 두 번째 매개변수는 이벤트가 발생한 후 실행될 함수입니다.
이 경우 mousemove() 함수를 만들고 이를 이벤트 리스너에 대한 콜백으로 전달했습니다. 이 함수는 event를 인수로 사용합니다. 이 event 변수는 마우스의 업데이트된 x 및 y 위치를 제공합니다. mousemove() 함수에 어떤 이름이든 지정할 수 있지만 정확한 이벤트 이름을 이벤트 리스너에 전달해야 합니다. 그렇지 않으면 작동하지 않습니다.
mousemove() 함수 안에 event.pageX, event.pageY, event.clientX, event.clientY를 사용하여 console.log() 마우스 값만 있습니다. 아래 스크린샷은 위 코드의 출력을 보여줍니다.
콘솔에서 출력을 보면 pageX,와 clientX는 동일한 값을 표시하고 pageY와 clientY는 동일한 값을 표시하므로 차이가 없음을 알 수 있습니다. 아직 페이지를 스크롤하지 않았으므로 동일한 값을 얻습니다.
페이지를 스크롤하여 값을 확인하면 값에 차이가 있습니다. 아래 스크린샷은 이를 보여줍니다.
페이지를 스크롤한 후 pageX 및 pageY 이벤트가 제공하는 값은 clientX 및 clientY 이벤트가 제공하는 값보다 큽니다. pageX와 pageY는 웹 페이지의 시작 부분부터 x와 y 값을 계산하는 반면 clientX와 clientY는 화면의 보이는 부분을 기준으로 값을 계산하기 때문입니다.
나중에 이 마우스 위치를 가져와 HTML 요소에 적용할 수도 있습니다(요소의 왼쪽 및 위쪽 값을 업데이트하여). 그러면 마우스 커서가 이동하는 곳마다 요소도 따라가게 됩니다. 이를 달성하려면 다른 마우스 이벤트도 사용해야 합니다.
이제 이러한 마우스 이벤트 중 실제로 사용할 이벤트에 대한 질문을 받을 수 있으며 이에 대한 대답은 사용 사례에 따라 다릅니다. 화면의 가시 영역 내에서만 마우스 위치를 추적하려면 clientX 및 clientY로 이동하십시오. 그렇지 않으면 pageX 및 pageY 마우스 이벤트를 사용하여 웹페이지 시작 부분에서 마우스 위치를 계산할 수 있습니다.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn