mousemove
원문 링크 
http://api.jquery.com/mousemove/
개요 : "mousemove" JavaScript 이벤트를 바인딩하거나, 특정 요소에 이벤트를 발생시킵니다.
- .mousemove( handler(eventObject) )
- handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
- .mousemove( [eventData], handler(eventObject) )
- eventData 이벤트 핸들러에 전달할 데이터 집합.
- handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
- .mousemove( )
이 함수는 .bind('mousemove', handler) 와 .trigger('mousemove') 를 줄여 표현한 것입니다.
mousemove 이벤트는 요소 안에서 마우스 포인터가 움직일 때 발생하게 됩니다. 어떤 HTML 요소라도 이 이벤트를 받을 수 있습니다.
예를들어:
<div id="target"> Move here </div> <div id="other"> Trigger the handler </div> <div id="log"></div>
<div>에 이벤트를 바인딩 하려면 :
$("#target").mousemove(function(event) {
var msg = "Handler for .mousemove() called at ";
msg += event.pageX + ", " + event.pageY;
$("#log").append("<div>" + msg + "</div>");
});자 마우스 포인터를 target div 안에서 이동시켜 보세요. 아래와 같이 <div id="log">에 텍스트를 뿌려집니다.
Handler for .mousemove() called at (399, 48)
Handler for .mousemove() called at (398, 46)
Handler for .mousemove() called at (397, 44)
Handler for .mousemove() called at (396, 42)
다른 요소를 클릭해서 이벤트를 발생시킬 수도 있습니다.
$("#other").click(function() {
$("#target").mousemove();
});위 코드를 추가하고 실행시키면 아래와 같은 결과를 볼 수 있습니다.
Handler for .mousemove() called at (undefined, undefined)
마우스의 움직임을 추적할 때, 마우스 포인터의 위치를 알 필요도 있습니다. 이 이벤트 객체는 마우스 상태에 대한 몇 가지 정보들을 담고 있습니다. code>.clientX, .offsetX, .pageX 와 같은 속성들을 사용할 수 있습니다. 하지만 브라우져 마다의 특성에 종속됩니다. 다행스럽게도 jQuery는 .pageX 와 .pageY 속성에 대해서는 모든 브라우져에서 동일하게 사용할 수 있도록 처리했습니다. 이 속성들은 문서의 top-left 코너를 기준으로 한 마우스 포인터의 X, Y 좌표를 알려줍니다. 아래 예제에 이 내용이 있습니다.
마우스 포인터가 움직일 때마다 mousemove 이벤트는 pixel 값을 기준으로 반환된다는 것을 알고 계셔야 합니다.. 이 뜻은 아주 작은 시간에 수백번의 이벤트가 발생한다는 뜻입니다. 만약 어떤 중요한 프로세스를 처리하는 핸들러나 이 이벤트를 위해 여러개의 핸들러가 있다면 퍼포먼스에 큰 영향을 주게 된다는 뜻입니다. 그래서 중요한 점은 mousemove 핸들러는 가능하면 아주 최적화 시켜서 사용해야 하며 더 이상 쓰지 않아도 될 때 반드시 그 즉시 이벤트 바인딩을 해제해 줘야 합니다.
사용되는 일반적인 패턴은 mousedown 이벤트 후에 mousemove 핸들러를 발생시키게 되고, mouseup 핸들러 뒤에 바인딩 해제를 하게 됩니다. 만일 이러한 방법으로 구현한다면If implementing this sequence of events, remember that the mouseup 이벤트는 mousemove와 다른 HTML 요소로 전달할 수 있습니다. 이런 부분때문에, 보통 <body>와 같은 DOM 트리의 상위 요소에서 mouseup 핸들러를 처리하곤 합니다.
마지막 문장은 좀 어려웠는데요. mouseup 이벤트는 body에 바인딩하면 mousemove 이벤트의 해제를 좀 더 원활하게 할 수 있다는 뜻 아닐까 합니다. 이 부분에 대해 조언이 필요합니다. 누군가 아시면 댓글 부탁드려요.
예 제
노란 박스에서 마우스를 움직이면 좌표를 찍어 줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div { width:220px; height:170px; margin;10px; margin-right:50px;
background:yellow; border:2px groove; float:right; }
p { margin:0; margin-left:10px; color:red; width:220px;
height:120px; padding-top:70px;
float:left; font-size:14px; }
span { display:block; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
Try scrolling too.
<span>Move the mouse over the div.</span>
<span> </span>
</p>
<div></div>
<script>
$("div").mousemove(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
});
</script>
</body>
</html>미리보기
마우스가 움직일 때마다 뭔가를 처리하는 것이 일반 웹어플에서도 많이 사용되던가요? 어쨌든 재밌는 함수입니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| off(), 이벤트 해제하기 (0) | 2012.02.24 |
|---|---|
| jQuery API - mouseup(), 마우스를 눌렀다 뗄 때 (0) | 2012.01.13 |
| jQuery API - mouseover(), 마우스가 올라올 때 (3) | 2012.01.13 |
| jQuery API - mouseout(), 마우스가 떠날 때 (2) | 2012.01.13 |
| jQuery API - mouseleave(), 마우스가 요소에서 벗어날 때 (0) | 2012.01.13 |
| jQuery API - mouseenter(), 마우스 진입 감지 이벤트 (2) | 2012.01.04 |
| jQuery API, mousedown, 마우스 누름 이벤트 (0) | 2012.01.04 |
| jQuery API - load(), 로드되면 발생하는 이벤트 (0) | 2012.01.04 |