마우스 이동 이벤트

마우스 이동 이벤트

1. MouseEvent type

• mousemove: 마우스 포인터가 이동할 때
• mouseover: 마우스 포인터가 요소 밖에서 안으로 이동할 때
• mouseout: 마우스 포인터가 요소 안에서 밖으로 이동할 때

2. MouseEvent.clientX, clientY

: 화면에 표시되는 창 기준 마우스 포인터 위치

• client 값은 그 순간 보여지는 화면을 기준으로 계산하기 때문에 스크롤 위치와는 무관하게 항상 보여지는 화면의 좌측 상단의 모서리 위치를 (0, 0)으로 계산

3. MouseEvent.pageX, pageY

: 웹 문서 전체 기준 마우스 포인터 위치

• 스크롤로 인해서 보이지 않게된 화면의 영역까지 포함해서 측정

4.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})`);
    console.log('------------------------------------');
 }

 box1.addEventListener('mousemove', onMouseMove);

• MouseEvent.target

: 이벤트가 발생한 요소

• MouseEvent.relatedTarget

: 이벤트가 발생하기 직전(또는 직후)에 마우스가 위치해 있던 요소