[책] 자바스크립트 코드 레시피 278 - 106일차

마우스 좌표 확인하기

• 마우스의 클릭 위치를 확인하고 싶을 때
• 마우스 움직임에 따라 요소를 반응시키고 싶을 때

구문

event.clientX 브라우저 좌측 상단 기준 X 좌표
event.clientY 브라우저 좌측 상단 기준 Y 좌표
event.offsetX 요소 좌측 상단 기준 X 좌표
event.offsetY 요소 좌측 상단 기준 Y 좌표
event.pageX 페이지 좌측 상단 기준 X 좌표
event.pageY 페이지 좌측 상단 기준 Y 좌표
event.screenX 디바이스 좌측 상단 기준 X 좌표
event.screenY 디바이스 좌측 상단 기준 Y 좌표

설명

click 이벤트와 mousemove 이벤트 등 마우스 조작 이벤트는 MouseEvent 의 객체입니다.
MouseEvent 객체는 이벤트 발생 시점의 좌표 정보가 포함되어 있으며, 기준 위치에 대해 몇 가지 속성을 가진다. clientX clientY offsetX offsetY 는 앞서 나온 Syntax 의 설명과 같습니다.

pageX pageY 는 페이지 스크롤 분량의 정보도 포함하며, screenX screenY 는 웹 페이지를 보고 있는 디바이스(컴퓨터, 스마트폰)의 좌측 위를 기준으로 합니다.

// 마우스 이동 시 좌표 출력
const targetBox = document.querySelector('.targetbox');
targetBox.addEventListener('mousemove', (event) => {
  console.log(event.clientX, event.clientY);
});

실습

화면에서 마우스를 클릭하면 해당 위치에 따라 요소가 이동하는 코드를 작성해봅니다.

index.html

<div class="circle"></div>

---

style.css

.circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border: 10px solid #000;
  border-radius: 100px;
  background-color: #808080;
  background-size: 200px 200px;
  box-sizing: border-box;
  /* background-image: url("circle.png"); */
}

---

script.js

const circle = document.querySelector('.circle');
console.log(circle);

document.addEventListener('mousedown', () => {

  document.addEventListener('mousemove', onMouseMove); // 마우스 움직임에 따라 이미지가 이동 시작

  document.addEventListener('mouseup', () => { // 화면에서 마우스 클릭을 떼면 이미지가 이동이 멈춤
    document.removeEventListener('mousemove', onMouseMove);
  });
});

function onMouseMove(event) { // 마우스 움직임에 따라 값 처리
  circle.style.left = `${event.pageX - 100}px`; // 이미지 사이즈의 반
  circle.style.top = `${event.pageY - 100}px`; // 이미지 사이즈의 반
}