마우스 움직임에 따라 움직이는 마우스 효과에 대해 알아보자!
아래와 같은 방법으로 mousemove 이벤트를 사용할 수 있다.
1. object.onmousemove = function(){myScript};
2. object.addEventListener("mousemove", myScript);
mousemove 이벤트 객체에서 사용할 수 있는 내용들!
1. clientX, clientY
2. pageX, pageY
3. offsetX, offsetY
4. screenX, screenY
① clientX, clientY
브라우저에서 사용자에게 웹페이지가 보여지는 영역을 기준으로 좌표를 표시
∴ 스크롤바무시하고 브라우저 상단을 0으로 측정, 스크롤해도 clientX, clientY의 값은 동일
event.clientX / event.X : 현재 보이는 화면 영역내 마우스 X좌표 값을 표기
event.clientY / event.Y : 현재 보이는 화면 영역내 마우스 Y좌표 값을 표기② pageX, pageY
전체 문서를 기준으로 한 좌표를 표시
만약 문서를 표현할 때 스크롤이 생긴다면 특정 지점의 pageY 좌표값은 페이지가 스크롤 될때마다 변경됨
∴ 스크롤 인식하고 전체문서가 기준
event.pageX: 전체 브라우저 화면 내에서의 x 좌표 값을 표기
event.pageY: 전체 브라우저 화면 내에서의 y 좌표 값을 표기③ offsetX, offsetY
좌표를 출력하도록 하는 이벤트가 걸려있는 DOM node를 기준으로 좌표를 표시
만약 특정 div 영역에서 offsetX, offsetY를 출력한다면,
div의 왼쪽 상단 모서리 부분의 offsetX, offsetY의 값은 (0, 0)이 된다.
∴ 스크롤인식하고 전체문서가 기준, 이벤트가 발생한 객체 기준으로 좌표출력한다.
event.offsetX: 이벤트 대상에서의 상대적 x 좌표값을 표기
event.offsetY: 이벤트 대상에서의 상대적 y 좌표값을 표기④ screenX, screenY
사용자 모니터 화면을 기준으로 한 좌표를 표시
사용자 모니터의 왼쪽 상단 모서리가 (0, 0)이 된다.
∴모니터 화면 기준, 브라우저를 움직여도 값이 동일함
event.screenX: 전체 모니터 화면에서의 x 좌표 값을 표기
event.screenY: 전체 모니터 화면에서의 y 좌표 값을 표기++추가
- 지난 mousemove 이벤트 위치 기준
event.movementX: 지난 mousemove 이벤트와 비교해 얼마나 x축으로 마우스가 움직였는지 표시
event.movementY: 지난 mousemove 이벤트와 비교해 얼마나 y축으로 마우스가 움직였는지 표시- shift, alt, ctrl, meta프로퍼티
event.altKey: 마우스가 움직일 때 alt키가 눌려있으면 true를 반환
event.ctrlKey : 마우스가 움직일 때 ctrl키가 눌려있으면 true를 반환
event.shiftKey : 마우스가 움직일 때 shift키가 눌려있으면 true를 반환
event.metaKey: 마우스가 움직일 때 meta키가 눌려있으면 true를 반환(MacOS에서 Cmd키) codepen으로 적용해보기!
참고사이트
https://www.w3schools.com/jsref/event_onmousemove.asp
https://ko.javascript.info/mouse-events-basics
https://yelee.tistory.com/28
https://hianna.tistory.com/493
