.mouseleave()
.mouseleave( handler )
描述：把某个事件处理函数绑定到一个元素上，当鼠标离开这个元素时引发该函数，，或者在某个元素上触发该事件。
- eventData类型：Anything一个对象，它包含了要传递给事件处理函数的数据。
- handler一个函数，在每次事件被触发时执行它。
该签名不接受任何参数。
该方法，在前两种变体中，是.on('mouseleave', handler)的简写，在第三种变体中是.trigger('mouseleave')的简写。
JavaScript事件mouseleave是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>" );
});
现在，当鼠标指针移出这个id=outer的div时，一条消息会追加到<div id="log">中。当别的元素被点击的时候，也能够触发这个事件：
$( "#other" ).click(function() {
$( "#outer" ).mouseleave();
});
在执行代码之后，在“Trigger the handler”上点击，也将追加这条消息。
在处理事件冒泡的方式上，mouseleave事件不同于mouseout事件。如果在这个示例中使用了mouseout事件，则当鼠标指针移出id="inner"这个元素时，也会触发处理函数。这通常是不想要的行为。另一方面，mouseleave事件，只有当鼠标指针离开绑定元素的时候，才触发它的处理函数，离开它的后代元素时不会触发。因此在这个示例中，当鼠标指针离开id="outer"这个元素时，会触发处理函数，但是当鼠标指针离开id="inner"这元素时，不会触发处理函数。
其它说明
- 因为
.mouseleave()方法是.on( "mouseleave", handler )的简写，可以使用.off( "mouseleave" )来分离。
示例
显示mouseout事件和mouseleave事件的触发次数。当鼠标指针移出子元素的时候，也会引发mouseout；与此同时，只有当鼠标指针移出绑定的元素的时候，才会引发mouseleave事件。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>mouseleave demo</title>
<style>
div.out {
width: 40%;
height: 120px;
margin: 0 15px;
background-color: #d6edfc;
float: left;
}
div.in {
width: 60%;
height: 60%;
background-color: #fc0;
margin: 10px auto;
}
p {
line-height: 1em;
margin: 0;
padding: 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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>
演示结果