.mouseleave()
.mouseleave( handler(eventObject) ) 官网原E文： jQuery
描述： 为 mouse leaves（鼠标离开） 事件绑定一个处理函数，或者触发元素上的 mouse leaves（鼠标离开） 事件。
-
version added: 1.0.mouseleave( handler(eventObject) )
handler(eventObject)每次事件触发时会执行的函数。
-
version added: 1.4.3.mouseleave( [ eventData ], handler(eventObject) )
eventData将要传递给事件处理函数的数据映射。
handler(eventObject)每次事件触发时会执行的函数。
version added: 1.0.mouseleave()
这个函数的第一种用法是 .bind('mouseleave', handler) 的快捷方式，第二种用法是 .trigger('mouseleave') 的快捷方式。
mouseleaveJavaScript事件是Internet Explorer专有的。由于事件的一般效用，jQuery的模拟这一事件，以便它可用于所有浏览器。当鼠标指针离开元素时，此事件发送到一个元素。任何HTML元素都可以接受此事件。
举例来说，请看下面的HTML：
<div id="outer">
Outer
<div id="inner">
Inner
</div>
</div>
<div id="other">
Trigger the handler
</div>
<div id="log"></div>
这个事件可以绑定到任何元素:
$('#outer').mouseleave(function() {
$('#log').append('<div>Handler for .mouseleave() called.</div>');
});
现在当指针在Outer <div>元素上移出时，Handler for .mousedown() called.将被添加到<div id="log">。当不同的元素被点击时我们也可以触发这个事件：
$('#other').click(function() {
$('#outer').mouseleave();
});
这些代码执行后，点击Trigger the handler同样警报显示。
mouseleave事件和mouseover的不同之处是事件的冒泡的方式。如果mouseover在这个例子中使用了，然后当鼠标指针在Inner元素上移出，该处理程序将被触发。这通常是不受欢迎的行为。另一方面, mouseleave 事件,当鼠标离开元素而不是一个后代时,它必然,只触发处理程序。因此，在这个例子中，当鼠标离开Outer元素，而不是Inner元素时，处理器被触发。
Example:
Show number of times mouseout and mouseleave events are triggered. mouseout fires when the pointer moves out of child element as well, while mouseleave fires only when the pointer moves out of the bound element.
<!DOCTYPE html>
<html>
<head>
<style>
div.out {
width:40%;
height:120px;
margin:0 15px;
background-color:#D6EDFC;
float:left;
}
div.in {
width:60%;
height:60%;
background-color:#FFCC00;
margin:10px auto;
}
p {
line-height:1em;
margin:0;
padding:0;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div class="out overout"><p>move your mouse</p><div class="in overout"><p>move your mouse</p><p>0</p></div><p>0</p></div>
<div class="out enterleave"><p>move your mouse</p><div class="in enterleave"><p>move your mouse</p><p>0</p></div><p>0</p></div>
<script>
var i = 0;
$("div.overout").mouseover(function(){
$("p:first",this).text("mouse over");
}).mouseout(function(){
$("p:first",this).text("mouse out");
$("p:last",this).text(++i);
});
var n = 0;
$("div.enterleave").mouseenter(function(){
$("p:first",this).text("mouse enter");
}).mouseleave(function(){
$("p:first",this).text("mouse leave");
$("p:last",this).text(++n);
});
</script>
</body>
</html>