[다양한 이벤트 알아보기] 03. 마우스 이동 이벤트 I

마우스 이동과 관련된 이벤트 타입은 주로 이 세가지가 이용됩니다.

/**
*
*
* > MouseEvent.type
* mousemove: 마우스 포인터가 이동할 때
* mouseover: 마우스 포인터가 요소 밖에서 안으로 이동할 때
* mouseout: 마우스 포인터가 요소 안에서 밖으로 이동할 때
*/

 

말 그대로 mousemove는 마우스가 이동할 때 발생하고 mouseover와 mouseout은 어떤 요소를 기준으로 마우스 포인터가 요소 밖에서 안으로 이동할 때 그리고 요소 안에서 밖으로 이동할 때 발생하는 이벤트입니다.

 

여기 box1 id를 가진 요소 위에서 마우스를 움직이면 콘솔에 마우스가 움직이고 있다는 메시지를 출력하는 이벤트 핸들러를 등록해 주었습니다. 코드를 저장하고 실행해보면 이렇게 요소 위에서 마우스가 움직일 때마다 이벤트 핸들러가 동작하는 것을 확인할 수 있습니다. 

const box1 = document.querySelector('#box1');

function onMouseMove() {
  console.log('mouse is moving');
}

box1.addEventListener('mousemove',onMouseMove);

이렇게 mousemove와 같이 마우스가 이동할 때 발생하는 이벤트에는 위치와 관련된 이벤트 객체의 프로퍼티들이 자주 활용됩니다. 대표적으로 client, page, offset 이 세 가지가 많이 활용되는데 이벤트 핸들러의 파라미터에 이벤트 객체를 써주고 그리고 안쪽을 이렇게 수정해 주면 이제는 마우스로 움직일 때마다 각 프로퍼티에 해당하는 위치 정보가 출력됩니다.

 

코드를 저장하고 실행해서 각 값들을 좀 더 살펴보면 일단 offset의 경우에는 이벤트가 발생한 요소 내에서의  포인터 위치를 담고 있습니다. 그래서 다른 값들과 비교해서 어느 정도 차이가 있는 모습을 확인할 수 있습니다.

반면 client와 page 값을 보면 두 값의 차이가 거의 없습니다. 그런데 스크롤을 한 상태에서 보면 y 값이 조금 차이가 나는 것을 확인할 수 있습니다.

client는 화면에 표시되는 창을 기준으로 마우스 위치를 담고 있고 page는 문서 전체를 기준으로 마우스 위치를 담고 있기 때문입니다.

세 프로퍼티가 각각 어떤 값을 담고 있는지 잘 기억해뒀다가 필요한 상황에 따라 적절하게 활용하면 좋을 것 같습니다.

예를 들어 이런 위치 정보를 가지고 특정한 위치에 도달했을 때 어떤 동작이 일어나도록 할 수도 있고 혹은 연속적으로 발생한 이벤트끼리의 위치값을 계산해서 지금은 x 값이 증가하고 y값도 증가했으니까 오른쪽 아래 방향으로 마우스가 이동한 방향을 파악하는데도 활용할 수 있다는 점 참고해두면 좋을 것 같습니다.

* > MouseEvent.clientX, clientY
* : 화면에 표시되는 창 기준 마우스 포인터 위치
*
* > MouseEvent.pageX, pageY
* : 웹 문서 전체 기준 마우스 포인터 위치
*
* > MouseEvent.offsetX, offsetY
* : 이벤트가 발생한 요소 기준 마우스 포인터 위치

const box1 = document.querySelector('#box1');

function onMouseMove(e) {
  console.log(`client: ${e.clientX}, ${e.clientY}`);
  console.log(`page: ${e.pageX}, ${e.pageY}`);
  console.log(`offset: ${e.offsetX}, ${e.offsetY}`);
}