最終更新日: 2021年3月8日
jQueryの.mouseover()と.mouseenter()の違いを紹介！
jQueryの.mouseover()と.mouseenter()の違いをサンプルコード付きで紹介します。両者ともマウスが乗ったときのイベント設定を行うメソッドですが、違いがあります。.mouseout()と.mouseleave()の違いを含めて解説します。
jQueryの.mouseover()と.mouseenter()の違いを知りたい
jQueryにはマウス関連のイベント設定のメソッドとして、マウスが乗った時の
- .mouseover()
- .mouseenter()
- .mouseout()
- .mouseleave()
さて、マウスが乗ったときにも2種類・外れたときにも2種類のメソッドがあり、ややこしいです。
今回はこれらの違いを解説し、ではどちらを使うべきなのかまで紹介していきます。
jQueryの.mouseover()と.mouseenter()の違い
では、まずはサンプルコードで.mouseover()と.mouseenter()の違いを見ていきましょう。
上記のサンプルコードのプレビューでは点線の内側にマウスカーソルを持っていくと結果欄に、テキストを追加する仕様となっています。
ここで灰色の「結果:」の箇所にカーソルを持っていくと.mouseover()と.mouseenter()の違いがよくわかります。
.mouseover()はパブリングが発生
灰色の「結果:」の箇所にカーソルを持っていくと、.mouseover()はイベントハンドラが2回実行されているのがわかると思います。
これが.mouseenter()と.mouseover()の大きな違いで
- .mouseenter(): パブリング発生しない
- .mouseover(): パブリング発生する
また同様にマウスが外れた時の
.mouseleave()と.mouseout()も
- .mouseleave(): パブリング発生しない
- .mouseout(): パブリング発生する
ちなみにパブリングとは何か知りたい方は下記を参考にしましょう。
どちらを使うべきか
ほとんどの状況ではパブリングは避けたいと思います。
そのためパブリングが発生しない
- .mouseenter(): マウスが乗った時のイベント設定
- .mouseleave(): マウスが外れた時のイベント設定
