.mouseout()
.mouseout( handler(eventObject) ) 返回： jQuery
描述： 為 "mouseout" 事件綁定一個(gè)處理函數(shù)，或者觸發(fā)元素上的 "mouseout" 事件。
-
version added: 1.0.mouseout( handler(eventObject) )
handler(eventObject)每次事件觸發(fā)時(shí)會(huì)執(zhí)行的函數(shù)。
-
version added: 1.4.3.mouseout( [ eventData ], handler(eventObject) )
eventData將要傳遞給事件處理函數(shù)的數(shù)據(jù)映射。
handler(eventObject)每次事件觸發(fā)時(shí)會(huì)執(zhí)行的函數(shù)。
version added: 1.0.mouseout()
這個(gè)函數(shù)的第一種用法是 .bind('mouseout', handler) 的快捷方式，第二種用法是 .trigger('mouseout') 的快捷方式。
當(dāng)鼠標(biāo)指針離開元素時(shí)，mouseout事件就會(huì)被發(fā)送到這個(gè)元素，任何HTML元素都可以接受此事件。
舉例來說，請(qǐng)看下面的HTML：
<div id="outer">
Outer
<div id="inner">
Inner
</div>
</div>
<div id="other">
Trigger the handler
</div>
<div id="log"></div>
這個(gè)事件可以綁定到任何元素:
$('#outer').mouseout(function() {
$('#log').append('Handler for .mouseout() called.');
});
現(xiàn)在當(dāng)指針在Outer <div>元素上移出時(shí)，“Handler for .mousedown() called.”這個(gè)字符串將被添加到<div id="log">。當(dāng)不同的元素被點(diǎn)擊時(shí)我們也可以觸發(fā)這個(gè)事件：
$('#other').click(function() {
$('#outer').mouseout();
});
這些代碼執(zhí)行后，點(diǎn)擊Trigger the handler 同樣添加這個(gè)信息。
此事件類型可以導(dǎo)致由于事件冒泡引起的很多頭痛的問題。例如，在這個(gè)例子中當(dāng)鼠標(biāo)指針移出Inner元素，mouseout事件將被發(fā)送到Inner元素，然后冒泡到Outer元素 。這可能會(huì)不合時(shí)宜的觸發(fā)綁定的mouseout處理函數(shù)。這可以用一個(gè)替代方法，見討論. mouseleave ()。
Example:
Show the number of times mouseout and mouseleave events are triggered. mouseout fires when the pointer moves out of the 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").mouseout(function(){
$("p:first",this).text("mouse out");
$("p:last",this).text(++i);
}).mouseover(function(){
$("p:first",this).text("mouse over");
});
var n = 0;
$("div.enterleave").bind("mouseenter",function(){
$("p:first",this).text("mouse enter");
}).bind("mouseleave",function(){
$("p:first",this).text("mouse leave");
$("p:last",this).text(++n);
});
</script>
</body>
</html>