jQueryでは、mouseover（）
と
mouseenter（）
の両方のイベントは、マッチした要素にマウスが入ると起動します。子要素の ”
イベントバブリング** “ハンドルの唯一の違いは、2つのシナリオを見てみましょう:
1.子要素なし
一致する要素に子要素がない場合、
mouseover（）
と
mouseenter（）
の両方のイベントは全く同じです。下に自分自身で試してみてください。
2.子要素が内部にある
一致する要素に子要素がある場合、
mouseover（）
と
mouseenter（）
の両方のイベントは、「
イベントのバブリング
」の仕方によって異なる作業です。
たとえば、「outerBox」には子要素「innerBox」が含まれています。
<div id="outerBox">OuterBox
<div id="innerBox">InnerBox
</div>
</div>
mouseover（）
-
マウスが “outerBox”に入ると、 “outerBox”イベントを発生させます.
-
マウスが “innerBox”に入ると、 “innerBox”イベントを発生させ、続いて
「outerBox」イベント
-
マウスが “outerBox”に戻ると、 “outerBox”イベントが発生します.
mouseenter（）
-
マウスが “outerBox”に入ると、 “outerBox”イベントを発生させます.
-
マウスが “innerBox”に入ると、 “innerBox”イベントを発生させます.
-
マウスが “outerBox”に戻ると、イベントは発生しません.
ええ、それはかなり混乱していて、 “言葉”で理解しています。以下の例を再生して理解してください。
自分で試してみてください
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
#mouseover-outerBox1, #mouseenter-outerBox1,
#mouseover-outerBox2, #mouseenter-outerBox2{
margin:8px;
border:1px groove #999966;
background-color : #999966;
width:150px;
height:150px;
color:white;
}
#mouseover-innerBox2, #mouseenter-innerBox2{
margin:8px 8px 8px 16px;
border:1px groove #0000FF;
background-color : #0000FF;
width:100px;
height:100px;
color:white;
}
span{
padding:8px;
}
.content{
width:500px;
height:250px;
}
.container1{
float:left;
padding-right:16px;
}
</style>
</head>
<body>
<h1>jQuery mouseover() vs mouseenter() example</h1>
<div class="content">
<div class="container1">
<span>mouseover() - no child element</span>
<div id="mouseover-outerBox1">OuterBox
</div>
<span id="mouseover-msg1">#mouseover is fired : 0</span>
</div>
<div class="container1">
<span>mouseenter() - no child element</span>
<div id="mouseenter-outerBox1">OuterBox
</div>
<span id="mouseenter-msg1">#mouseenter is fired : 0</span>
</div>
</div>
<div class="content">
<div class="container1">
<span>mouseover() - with child elements</span>
<div id="mouseover-outerBox2">OuterBox
<div id="mouseover-innerBox2">InnerBox
</div>
</div>
<span id="mouseover-outer-msg2">#mouseover outer is fired : 0</span>
<br/>
<span id="mouseover-inner-msg2">#mouseover inner is fired : 0</span>
</div>
<div class="container1">
<span>mouseenter() - with child elements</span>
<div id="mouseenter-outerBox2">OuterBox
<div id="mouseenter-innerBox2">InnerBox
</div>
</div>
<span id="mouseenter-outer-msg2">#mouseenter outer is fired : 0</span>
<br/>
<span id="mouseenter-inner-msg2">#mouseenter inner is fired : 0</span>
</div>
</div>
<script type="text/javascript">
//example 1
var mouseover1=1;
$('#mouseover-outerBox1').mouseover(function(event) {
$('#mouseover-msg1').text('#mouseover is fired : ' + mouseover1++)
});
var mouseenter1=1;
$('#mouseenter-outerBox1').mouseenter(function(event) {
$('#mouseenter-msg1').text('#mouseenter is fired : ' + mouseenter1++)
});
//example 2
var mouseoverouter2=1;
$('#mouseover-outerBox2').mouseover(function(event) {
$('#mouseover-outer-msg2')
.text('#mouseover outer is fired : ' + mouseoverouter2++)
});
var mouseoverinner2=1;
$('#mouseover-innerBox2').mouseover(function(event) {
$('#mouseover-inner-msg2')
.text('#mouseover inner is fired : ' + mouseoverinner2++)
});
var mouseenterouter2=1;
$('#mouseenter-outerBox2').mouseenter(function(event) {
$('#mouseenter-outer-msg2')
.text('#mouseenter outer is fired : ' + mouseenterouter2++)
});
var mouseenterinner2=1;
$('#mouseenter-innerBox2').mouseenter(function(event) {
$('#mouseenter-inner-msg2')
.text('#mouseenter inner is fired : ' + mouseenterinner2++)
});
</script>
</body>
</html>
リンク://wp-content/uploads/jQuery/jQuery-mouseover-mouseenter-example.html[デモを試してください]
