jQueryのmouseover()とmouseenter()の違い

jQueryのmouseover()とmouseenter()で異なる

jQueryでは、マウスが一致した要素に入ると、mouseover()イベントとmouseenter()イベントの両方が発生します。 唯一の違いは、子要素の「event bubbling」ハンドルの方法です。2つのシナリオを見てみましょう。

1. 子要素なし

一致した要素に子要素がない場合、mouseover()イベントとmouseenter()イベントの両方がまったく同じように機能します。 以下で自分で試してみてください。

2. WITH子要素内部

一致した要素に子要素がある場合、mouseover()イベントとmouseenter()イベントの両方が、「event bubbling」の方法で異なる動作をします。

たとえば、「outerBox」には子要素「innerBox」が含まれます。

OuterBox
InnerBox

P.S Assure both outerBox and innerBox are attached to certain events.

mouseover()
  1. マウスが「outerBox」に入ると、「outerBox」イベントが発生します。

  2. マウスが「innerBox」に入ると、「innerBox」イベントが発生し、「outerBox」イベントが続きます。

  3. マウスが「outerBox」に戻ったら、「outerBox」イベントを発生させます。

mouseenter()
  1. マウスが「outerBox」に入ると、「outerBox」イベントが発生します。

  2. マウスが「innerBox」に入ると、「innerBox」イベントが発生します。

  3. マウスが「outerBox」に戻ると、イベントは発生しません。

ええ、それは非常に混乱し、「言葉」で理解しています。以下の例を再生して理解しましょう。

自分で試してください










  

jQuery mouseover() vs mouseenter() example

mouseover() - no child element
OuterBox
#mouseover is fired : 0
mouseenter() - no child element
OuterBox
#mouseenter is fired : 0
mouseover() - with child elements
OuterBox
InnerBox
#mouseover outer is fired : 0
#mouseover inner is fired : 0
mouseenter() - with child elements
OuterBox
InnerBox
#mouseenter outer is fired : 0
#mouseenter inner is fired : 0