マウスによるイベント:mouseenterとmouseleave

前回ではマウスのイベントmouseoverとmouseoutを紹介しましたが、今回は同様にマウスのイベントであるmouseenterとmouseleaveについて紹介したいと思います。

mouseenterとmouseleave

mouseenterとmouseleaveのイベントはそれぞれmouseoverとmouseoutのイベントに似ています。
mouseenterはHTMLの要素にマウスのポインタ―を乗せることをイベントとして登録でき、mouseleaveは要素からポインターを離すことをイベントとして登録できます。
このmouseenterとmouseleaveもonmouseenter属性とonmouseleave属性のイベントハンドラの属性を持っており、イベントトリガーとして扱うことができます。

mouseoverとmouseoutとの違い

mouseenterとmouseleaveはmouseoverとmouseoutと似ていますがHTMLの要素の構造に対して動きが異なります。
HTMLの要素はある要素が別の要素を含む入れ子構造（ネスティングとも）ですが、その要素間で次のような違いがあります。
mouseoverとmouseoutでは外側の要素と内側の要素の間でマウスポインタ―を動かすとイベントが発生します。
mouseenterとmouseleaveでは外側の要素と内側の要素でマウスポインタ―を動かすとイベントは発生しません。
このように入れ子構造の要素間でイベントの発生するかどうか違いがあります。




このスクリプトはmouseoverとmouseout、mouseenterとmouseleaveのイベントが発生した回数をカウントするものです。
イベントが発生する対象はHTMLのbox1の中にbox2があるという入れ子構造の要素となり、イベントリスナーはbox1に登録してあります。
要素間でのイベントの発生にmouseoverとmouseout、mouseenterとmouseleaveそれぞれに違いが出てきます。