jQueryのmouseover()とmouseenter()で異なる
jQueryでは、マウスが一致した要素に入ると、mouseover()イベントとmouseenter()イベントの両方が発生します。 唯一の違いは、子要素の「event bubbling」ハンドルの方法です。2つのシナリオを見てみましょう。
1. 子要素なし
一致した要素に子要素がない場合、mouseover()イベントとmouseenter()イベントの両方がまったく同じように機能します。 以下で自分で試してみてください。
2. WITH子要素内部
一致した要素に子要素がある場合、mouseover()イベントとmouseenter()イベントの両方が、「event bubbling」の方法で異なる動作をします。
たとえば、「outerBox」には子要素「innerBox」が含まれます。
OuterBoxInnerBox
P.S Assure both outerBox and innerBox are attached to certain events.
mouseover()
-
マウスが「outerBox」に入ると、「outerBox」イベントが発生します。
-
マウスが「innerBox」に入ると、「innerBox」イベントが発生し、「outerBox」イベントが続きます。
-
マウスが「outerBox」に戻ったら、「outerBox」イベントを発生させます。
mouseenter()
-
マウスが「outerBox」に入ると、「outerBox」イベントが発生します。
-
マウスが「innerBox」に入ると、「innerBox」イベントが発生します。
-
マウスが「outerBox」に戻ると、イベントは発生しません。
ええ、それは非常に混乱し、「言葉」で理解しています。以下の例を再生して理解しましょう。
自分で試してください
jQuery mouseover() vs mouseenter() example
mouseover() - no child elementOuterBox#mouseover is fired : 0mouseenter() - no child elementOuterBox#mouseenter is fired : 0mouseover() - with child elementsOuterBox#mouseover outer is fired : 0InnerBox
#mouseover inner is fired : 0mouseenter() - with child elementsOuterBox#mouseenter outer is fired : 0InnerBox
#mouseenter inner is fired : 0