.mousemove()
.mousemove( handler )
描述：把某个事件函数绑定到JavaScript事件“mousemove”上，或者在某个元素上触发该事件。
- eventData类型：Anything一个对象，它包含了要传递给事件处理函数的数据。
- handler一个函数，在每次事件被触发时执行它。
该签名不接受任何参数。
该方法，在前两种变体中，是.on( "mousemove", handler )的简写，在第三种变体中，是.trigger( "mousemove" )的简写。
当鼠标指针在一个元素内部移动时，mousemove事件被发送到该元素上。任何HTML元素都能接收该事件。
举个例子，设想下面的HTML：
<div id="target"> Move here </div> <div id="other"> Trigger the handler </div> <div id="log"></div>
事件处理函数可以绑定到目标上：
$( "#target" ).mousemove(function( event ) {
var msg = "Handler for .mousemove() called at ";
msg += event.pageX + ", " + event.pageY;
$( "#log" ).append( "<div>" + msg + "</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)要想人为触发该事件，请不带参数地调用.mousemove()。
$( "#other" ).click(function() {
$( "#target" ).mousemove();
});
在代码执行之后，在触发按钮上点击，也将追加这条消息：
Handler for .mousemove() called at (undefined, undefined)在跟踪鼠标移动的时候，你通常需要知道鼠标指针的实际位置。这个事件对象会传给处理函数，它包含了一些关于鼠标坐标的信息。像.clientX、.clientY和.pageX、.pageY这样的属性是可用的，但是在不同的浏览器中有不同的支持。幸好jQuery规范化了.pageX属性和.pageY属性，从而可以在所有浏览器中使用它们。这些属性提供了鼠标指针相对于document的左上角的X坐标和Y坐标，如上面的示例输出所示。
请记住，每当鼠标指针移动时，就会触发mousemove事件，哪怕只移动了一像素。这意味着在一小段时间内会生成几百次事件。如果处理函数不得不做任何明显的处理，或者如果对这个事件绑定了多个处理函数，这可能造成浏览器的严重的性能问题。因此，尽可能地优化mousemove 处理函数很重要，而且当不再需要它们时应尽快解除绑定。
一个常见的模式是在mousedown事件的处理函数内部绑定mousemove事件处理函数，而且在相应的mouseup事件处理函数上对它解除绑定。如果实现了这一系列事件，请记住mouseup事件可能会发送到别的HTML元素上，而不是发送到mousemove事件绑定的元素。出于这个原因，mouseup事件处理函数通常应该绑定到DOM树中层次较高的元素上，比如说<body>上。
其它说明
- 因为
.mousemove()方法是.on( "mousemove", handler )的简写，所以可以使用.off( "mousemove" )来分离。
示例
当鼠标在黄色div内部移动时，显示鼠标的坐标位置。坐标位置相对于窗口，在这个案例是指iframe。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>mousemove demo</title>
<style>
div {
width: 220px;
height: 170px;
margin: 10px 50px 10px 10px;
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="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>
<span>Move the mouse over the div.</span>
<span> </span>
</p>
<div></div>
<script>
$( "div" ).mousemove(function( event ) {
var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
$( "span:first" ).text( "( event.pageX, event.pageY ) : " + pageCoords );
$( "span:last" ).text( "( event.clientX, event.clientY ) : " + clientCoords );
});
</script>
</body>
</html>
演示结果