初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
1章：jQuery入門
2章：jQuery基礎
3章：jQuery発展
番外編：研究

mouseenterについて

mouseoverでイベントフローを確認

イベントフローではclickイベントを利用しましたが、ここではマウスが要素に重なったときに発生するmouseoverイベントについて説明します。このイベントに関してもイベントフローを理解していないと思わぬ動作になってしまいますので、しっかり覚えるようにしましょう。サンプルサンプル（02/13_01.html）を開いてjQueryを確認してください。 

$(document).on("mouseover", "div", function () {
	alert(this.id);
})

イベントフロー(1)で紹介したサンプル（02/11_02.html）とjQueryはほとんど変わらず、イベントがmouseoverに変更されただけです。body内には入れ子になったdiv（idはinとout）があります。これらdivにmouseoverするとアラートでidが表示されるので、どのように表示されるか確認して下さい。

外側(out)のdivにマウスを重ねると「out」と表示されるのは理解できると思います。しかし内側(in)のdivにマウスが重なったときの動作は意外だったのではないでしょうか？アラートが２回（inとout）表示されます。

しかしイベントフローを学習した後であれば理解できるはずです。クリックと同様にイベントが浅い階層に伝わるためアラートが２回表示されるのです。イベントフロー(1)のサンプル（02/11_02.html）でもクリックしたら3回アラートが表示されたのを思い出して下さい。

では前回学んだイベントフローを止めるstopPropagationメソッドを利用してみましょう。サンプル（02/13_02.html）を開いてjQueryを確認してください。以下の様にstopPropagationメソッドを追加（3行目）しました。これにはイベントオブジェクトが必要なのでfunctionの引数の部分に変数を設定すること（1行目）を忘れないで下さい。 

$(document).on("mouseover", "div", function (eo) {
	alert(this.id);
	eo.stopPropagation();
})

これで予想通り内側のdivにマウスが重なったときは「in」としか表示されないようになりました。

mouseoverの注意点

これだけならイベントフローと別にページを用意する必要はなかったのですが、mouseoverではさらにややこしくなるのです。サンプル（02/13_03.html）を開いてjQueryを確認してください。変更点は以下の様にセレクタをdiv#outに変更しただけです。 

$(document).on("mouseover", "div#out", function (eo) {
	alert(this.id);
	eo.stopPropagation();
})

このセレクタならoutのdivにしか反応しないと考えるのが普通です。しかし内側のdivにマウスを重ねるとイベントが発生し、アラートで「out」と表示されます。

これもイベントフローの仕組みなのです。分かりにくいのでclickイベントのサンプルで確認します。サンプル（02/13_04.html）を開いてjQueryを確認してください。このサンプルはイベントフロー(1)のサンプル（02/11_03.html）とほとんど同じなのですが、セレクタが以下の様にredのdivに変更されています。 

$(document).on("click", "div#red", function () {
	alert(this.id);
})

このサンプルで緑のdivをクリックして下さい。アラートで「red」と表示されるはずです。これはイベントは違えどサンプル（02/13_03.html）の現象と同じです。

これは入れ子構造の場合、イベントが発生した要素でなくても、背後（浅い階層）の要素にイベントを伝えるイベントフローの仕様です。この仕様のおかげでサンプル02/13_03.htmlのように、緑のdivに隠された背後にある赤いdivがクリックできるのです。ここでイベントフローを止めるstopPropagationメソッドについて補足します。これはイベントが設定された要素からのイベントフローを停止するメソッドです。サンプル02/13_03.htmlではイベントはdiv#redに設定されていますから、そこから先のイベントフロー（赤から青への流れ）を停止します。

つまりイベントが設定されたdiv#red以前のイベントフロー（緑から赤）はstopPropagationメソッドでは止められないのです。かといって、それを止めるメソッドはありません。

ではサンプル（02/13_03.html）で内側のdivにマウスが重なったときにアラートを出さないようにすることはできないのか？それでは困るので、jQueryにはmouseenterというイベントが用意されているのです。

mouseenterメソッド

これから紹介するmouseenterイベントは入れ子構造で、深い階層の要素から送られてくるイベントを受け取りません。上の図でいうと、緑が受け取ったイベントを赤に渡そうとするけど、赤は受け取らないというものです。

サンプル（02/13_05.html）を開いてjQueryを確認してください。サンプル（02/13_03.html）から、以下の様にイベントがmouseenterに変更されているだけです。このサンプルでは内側のdivにマウスが重なっても「out」とアラートが表示されることはありません。 

$(document).on("mouseenter", "div#out", function (eo) {
	alert(this.id);
	eo.stopPropagation();
})

mouseoverとmouseenterの仕様の違いを理解して、必要に応じて使い分けるようにしましょう。
※入れ子構造のボタンが必要になることは少ないので、ほとんどの場合気にしなくてOKだと思います。

mouseoutとmouseleave

mouseoverイベントの対としてmouseoutイベント（マウスが対象から外れる）があります。同じようにmouseenterイベントには対になるmouseleaveイベントがあります。mouseoutとmouseleaveの違いはmouseoverとmouseenterの違いと同じで、深い階層からのイベントを受け取りません。mouseoutを利用したサンプル（02/13_06.html）とmouseleaveを利用したサンプル（02/13_07.html）で違いを確認してください。

これで第２章：イベントの説明は終わりです。次回からの第３章ではアニメについて説明していきます。