목차
- mousemove 예제 - 마우스포인터 이동 시 실행
- mousemove 정의
- mousemove 구문
mousemove 예제 - 마우스포인터 이동 시 실행
<style>
div {width: 200px; height: 100px; border: 1px solid black;}
</style>
<div onmousemove="homzzang(event)" onmouseout="clearCoor()"></div>
<p id="demo"></p>
<script>
function homzzang(e) {
var x = e.clientX;
var y = e.clientY;
var coor = "Coordinates: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML = coor;
}
function clearCoor() {
document.getElementById("demo").innerHTML = "";
}
</script>
결과보기
주의: clear()로 함수명 지으면 함수가 제대로 작동 X.
mousemove 정의
마우스포인터가 요소 위에서 움직일 때 실행.
1.
모든 브라우저 지원.
2.
- 이벤트확산 : O
- 취소가능성 : O
- 이벤트타입 : MouseEvent
- 지원 HTML : 모든 HTML 요소, (예외: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title>)
- DOM 버전 : Level 2 Events
3. MDN mousemove 예제보기
https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event
mousemove 구문
- <element onmousemove="homzzang()">
- object.onmousemove = function(){homzzang()};
- object.addEventListener("mousemove", homzzang);
PS.
- homzzang : 실행함수명. (※ 함수명 자리에 실행코드를 직접 입력 가능)
- addEventLister() 방식 주의사항 2가지 : ① 이벤트명에 on 안 붙인. / ② 실행함수명 뒤에 소괄호 안 붙임.
- addEventListener() 메서드는 IE8 및 그 이전 브라우저는 지원 X.
