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

HTML5のDOMイベントに、mouseenter と mouseoverという、よく似たマウスイベントがあります。ここには、その違いについて調べたことを書いておきます。 どちらもマウスポインターが要素の上に入ってきた時に発生するイベントで、それぞれに対応する「マウスポインタ―が要素から外れた」時のイベントとして mouseleave と mouseout もありますね（mouseenter には mouseleave 、mouseover には mouseout が対応します）。 この2種類のイベント間には、発生要因や伝播（バブリング/プロパゲーション）に関する違いがあります。 私は最近まで、この違いを意識しておらず「歴史的理由による別名？」かと思っていて、その場で適当に思いついた方を使っていました。 先日ふと疑問に思ってMDNで調べてみたら、どうやら上記のように明確な違いがあると知った

[noonworks]

divの一辺のpadding消して全要素に一気にマウス乗せて試すとわかる。送信sentと伝播bubbleは違って、overはdiv4にsentされたものが親にbubble（1つのevent）し、enterはdiv1～4全部に個別にsentされる（4つの別々のevent）…だと思う

[howdy39]

わかりやすかった