Google グループの blink-dev で、mouseenter / mouseleave イベントに関する話題が上がっていました。
簡単にいえば、Blink レンダリングエンジンで、mouseenter / mouseleave イベントをサポートするよという内容。WebKit Bugzilla の方でも 4月に mouseenter / mouseleave イベントのサポートに関する最終パッチが投稿されていて、最新のビルドでは実装済みです。
この mouseenter / mouseleave イベントに関しては、上でもリンクしている 「Bug 18930 - mouseenter and mouseleave events not supported」 で長いこと議論されてましたが、やっとこの議論に決着がついたので、Blink の方でもサポートっていう流れに。
これで近いうちには主要なブラウザ （IE は 9 以降） がすべて、mouseenter / mouseleave イベントをサポートすることになります。
mouseenter / mouseleave イベントとは
mouseenter イベントは、対象となる要素の領域にポインティングデバイス （要するにマウスカーソル） が入った場合、逆に mouseleave イベントはその要素の領域外にマウスカーソルが出た場合にイベントが発生します。
mouseover / mouseout と似ていて異なるのはイベントバブル動作の有無 （親要素にイベントが伝播するか否か。mouseenter / mouseleave はイベントバブルが発生しません） と、対象となる要素に子孫要素があった場合、mouseover / mouseout イベントは、その子孫要素上にマウスカーソルが重なった際にも毎回イベントが発生するのに対して、mouseenter / mouseleave イベントは子要素の有無には関係なく、対象となる要素の領域にマウスカーソルが入った / 出たでイベントが発生するところ。
イベント発生タイミングの件は、例えば下記のようなソースがあったとして、
<style>
div {
border: 3px solid black;
padding: 20px;
}
</style>
<div id="content1">
<div class="inner">
text
</div>
</div>
div#content1 に対して mouseenter / mouseleave イベントを指定した場合、div#content1 のボーダー領域から内側にマウスカーソルが入った時、または出た時にイベントが発生します。
mouseover / mouseout の場合もそこは同じですが、そのまま内側にマウスカーソルが進んで、div.inner の領域にマウスカーソルが入った場合も、div#content1 に対する mouseover / mouseout イベントがそれぞれ発生します。一方の mouseenter / mouseleave イベントは発生しません。
と、文章で説明してもわかりにくいと思うので下記にサンプルページを用意しました。
マウスカーソルを要素 （背景色がついてる部分） に重ねたり外したりすると、それぞれのイベントの発生回数がカウントされると思いますので、その差を確認してみてください （mouseenter / mouseleave イベントが未実装のブラウザでも確認できるように jQuery を使用しています）。
Developers like mouseenter/mouseleave, as they're much simpler to work with than mouseover/mouseout. Libraries such as jQuery roll their own implementations, and since WebKit has implemented the events, they're spending bytes in every download just for Chrome. We should make that unnecessary. See https://bugs.webkit.org/show_bug.cgi?id=18930 for some historical discussion. I intend to port that bug's patch to Blink.
Intent to implement and ship: mouseenter/mouseleave events. ： blink-dev / Google グループ から引用
「開発者は mouseenter/mouseleave が好きだよね。mouseover/mouseout よりシンプルだからさ。jQuery みたいなライブラリは独自にこの機能を実装してるけど、Webkit が mouseenter/mouseleave を実装すると、Chrome だけがライブラリに頼る状態になっちゃうから実装した方がいいよね。」 というお話です。
