mouseoverとmouseenterの違いって?

こんばんは、有村です!
あけましておめでとうございます。
2018年も、実装にて気付いたことや引っかかったこと、備忘録としてゆる〜く更新していこうと思うので、よろしくお願いします。

さて、今回はmouseoverとmouseenterの違いって?です!
癖でmouseenterって書くようにはしているんですけど、この両者の違いって明確にはなんだっけ…と分からなくなったので、
調べることにしました!

こんなコードがあったとします。
mouseoverもmouseenterも、どちらもdivに対して設定されていますね!

私はこう思いました…
ログが出力されるタイミングは、どっちも同じじゃないか?と。

しかし、実際にやってみると…
divエリアにマウスが入る → mouseover、mouseenterが反応する
aエリアにマウスが入る → mouseoverが反応する
aエリアを離れる(見た目としてはdivエリアに入る) → mouseoverが反応する
という全然違う結果になりました。

でも考えてみるとおかしい…自分はdivエリアに対してイベントを設定しているのに、なぜaに関するイベントを拾っているのか?
彼らは親と子の関係ではあるけれど、なぜ………………はっ。
バブリングか!?
なるほど、aの要素にマウスが乗ると、そのイベントがdivにも伝搬している…いうことですね。

ではmouseenterの場合はそうではないということでしょうか…
と思って調べました。
https://developer.mozilla.org/ja/docs/Web/Events/mouseenter
我らが守護神のひとり、MDN様はこうおっしゃっています。

Similar to mouseover, it differs in that it doesn’t bubble and that it isn’t sent when the pointer is moved from one of its descendants’ physical space to its own physical space.

残念ながら日本語訳がなかったのですが、なんとなくmouseenterはバブリングしないということが読み取れます。
また、子孫から自身にポインタが移動したときにはイベントが発生しない、という点もmouseoverとの違いですね!
(訳間違ってたらすみません;)
だから「aエリアを離れる(見た目としてはdivエリアに入る)」の場合、mouseoverしか反応しなかったんですね。
納得。

活用シーンを考えると、mouseenter一択じゃないか!?と思ったのですが、

With deep hierarchies, the amount of mouseenter events sent can be quite huge and cause significant performance problems. In such cases, it is better to listen for mouseover events.

とあるので、これまた使い所は考えたほうがいいということですね!

それでは、きょうはこのへんで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です