목차
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.
최신댓글