jQueryのmouseover()とmouseenter()の違い
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[デモを試してください]