銀の弾丸

プログラミングに関して、いろいろ書き残していければと思っております。

mouseenterとmouseoverの違いなどDOMイベントの発生状況を可視化して調べてみたよ

f:id:takamints:20180507065734p:plain

HTML5のDOMイベントに、mouseentermouseoverという、よく似たマウスイベントがあります。ここには、その違いについて調べたことを書いておきます。

どちらもマウスポインターが要素の上に入ってきた時に発生するイベントで、それぞれに対応する「マウスポインタ―が要素から外れた」時のイベントとして mouseleavemouseout もありますね(mouseenter には mouseleavemouseover には mouseout が対応します)。

この2種類のイベント間には、発生要因や伝播(バブリング/プロパゲーション)に関する違いがあります。

私は最近まで、この違いを意識しておらず「歴史的理由による別名?」かと思っていて、その場で適当に思いついた方を使っていました。 先日ふと疑問に思ってMDNで調べてみたら、どうやら上記のように明確な違いがあると知ったのですが、はっきりイメージがつかみきれなかったので確認用に作ってみたのが以下のものです。

マウスイベントを可視化する

以下、4つのDOM要素が入れ子になっていて、各要素が拾ったマウスイベントを表示します(前述の4つのイベントだけ調べるつもりでしたが、せっかくなので他のイベントもListenしました)。要素の上でマウスを動かせば各インジケータがビカビカします(ちょっとうるさいですが目立つと思って)。

各要素には、preventDefaultstopPropagationというチェックボックスがあります。 それぞれチェックを付けると、その要素のイベント処理で event.preventDefault()event.stopPropagation() を実行します。 例えば、‘#Div4‘の上でマウスを動かすとmousemoveが全要素に発生しますが、stopPropagationにチェックを入れた要素の親へは伝播しません (preventDefaultはこれらのイベントに関して変化がなさそうなのですが、とりあえず残しています)。

マウスポインタが要素の「外側から内側」へ移動するとき

全てのstopPropagationのチェックを外した状態で、#Div1の左右または下の外側から*1#Div4の内側までマウスポインタ―を動かしていったとき、以下のことが観察されます(実際にやってみてください)。

*1 - マウスポインターが各要素の上側を通過すると情報を表示している要素の境目でイベントが発生してしまうので避けるべき。

マウスポインタが要素の「内側から外側」へ移動するとき

次に、#Div4 の内側から、左右または下に向かって、#Div1 の外側までマウスポインタ―を動かすと、以下のことが観察できます(全てのstopPropagationのチェックは外したままです)。

各イベントの伝播を確認

上と同じく、全てのstopPropagationのチェックを外したままで、各イベントが発生した場合、

  • mouseovermouseout は親要素へ伝播しますが、
  • mouseentermouseleave は伝播しません。

そして、伝播を抑制するには、イベントハンドラーの中で event.stopPropagation() を呼び出します。

MDNに書いてあること

MDNの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.

翻訳すると「深い階層では、送信される mouseenter イベントが大量になる可能性があり、重大なパフォーマンスの問題の原因になり得る。その場合は mouseoverイベントを使うといい」とのことですが、これって上で見たことと少し雰囲気が違ってないか?と。 mouseover が全ての親に伝播していて、たくさん発生しているように見えましたけど?

「逆じゃないの?」って、かなりMDNを疑ってみたのですが、しかし、これはこれでどうやら間違いではないみたい。 すべての要素でイベントをListenしているので、大量の mouseover が発生していましたが、通常そんなことはしませんね。 イベントはaddEventListenerしている要素に発生して後は親要素に向かって伝播するだけ。 イベントを処理すべき要素だけにハンドラを設定しておけばなんら問題がないはず。

一方「mouseenterが大量に発生して」という部分はよくわかりません。 そのようなケースが今のところ想定できないのですが。 mouseenterは、そもそも親要素に伝播しないし、論理的な自要素の領域内にあればmouseleaveは発生しないので、必要なところでListenしておけば問題ないような気がするし、そもそも用途が違うんじゃないのか?と。

ちょっとモヤモヤしてますが、とりあえず・・・。

リンク