.mouseenter()
.mouseenter( handler(eventObject) ) 返回： jQuery
描述： 為 mouse enters（鼠標(biāo)進(jìn)入） 事件綁定一個(gè)處理函數(shù)，或者觸發(fā)元素上的 mouse enters（鼠標(biāo)進(jìn)入） 事件。
-
version added: 1.0.mouseenter( handler(eventObject) )
handler(eventObject)每次事件觸發(fā)時(shí)會(huì)執(zhí)行的函數(shù)。
-
version added: 1.4.3.mouseenter( [ eventData ], handler(eventObject) )
eventData將要傳遞給事件處理函數(shù)的數(shù)據(jù)映射。
handler(eventObject)每次事件觸發(fā)時(shí)會(huì)執(zhí)行的函數(shù)。
version added: 1.0.mouseenter()
這個(gè)函數(shù)的第一種用法是 .bind('mouseenter', handler) 的快捷方式，第二種用法是 .trigger('mouseenter') 的快捷方式。
mouseenterJavaScript事件是Internet Explorer專有的。由于事件的一般效用，jQuery的模擬這一事件，以便它可用于所有瀏覽器。當(dāng)鼠標(biāo)指針進(jìn)入的元素時(shí)，此事件發(fā)送到一個(gè)元素。任何HTML元素都可以接受此事件。
舉例來(lái)說(shuō)，請(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').mouseenter(function() {
$('#log').append('<div>Handler for .mouseenter() called.</div>');
});
現(xiàn)在當(dāng)指針在Outer <div>元素上移動(dòng)時(shí)，Handler for .mousedown() called.將被添加到<div id="log">。當(dāng)不同的元素被點(diǎn)擊時(shí)我們也可以觸發(fā)這個(gè)事件：
$('#other').click(function() {
$('#outer').mouseenter();
});
這些代碼執(zhí)行后，點(diǎn)擊Trigger the handler同樣警報(bào)顯示。
mouseenter事件和mouseover的不同之處是事件的冒泡的方式。如果mouseover在這個(gè)例子中使用了，然后當(dāng)鼠標(biāo)指針在Inner元素上移動(dòng)，該處理程序?qū)⒈挥|發(fā)。這通常是不受歡迎的行為。另一方面, mouseenter 事件,當(dāng)鼠標(biāo)進(jìn)入元素而不是一個(gè)后代時(shí),它必然,只觸發(fā)處理程序。因此，在這個(gè)例子中，當(dāng)鼠標(biāo)進(jìn)入Outer元素，而不是Inner元素時(shí)，處理器被觸發(fā)。
Example:
Show texts when mouseenter and mouseout event triggering. mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into 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");
$("p:last",this).text(++i);
}).mouseout(function(){
$("p:first",this).text("mouse out");
});
var n = 0;
$("div.enterleave").mouseenter(function(){
$("p:first",this).text("mouse enter");
$("p:last",this).text(++n);
}).mouseleave(function(){
$("p:first",this).text("mouse leave");
});
</script>
</body>
</html>