jQueryのmouseoverメソッドとmouseenterメソッドの違い

このエントリーをはてなブックマークに追加

このエントリーはjQuery Advent Calendar 2013の 2日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。)

1日目ではJavaScriptのイベントデリゲートやイベントバブリングについて解説をしたので、それを踏まえて2日目はjQueryのmouseoverメソッドとmouseenterメソッドの違いについて解説します。

mouseoverメソッドとmouseoutメソッド

mouseoverメソッドとmouseoutメソッドはその名のとおり、要素のマウスカーソルが乗った場合やマウスカーソルが外れた際に発火するイベントです。次のように記述するとdiv要素にマウスカーソルが乗った際に横幅、高さが200pxに拡大され、マウスカーソルが外れた際に横幅、高さが100pxにもどります。

$("div").mouseover(function(){
	$(this).animate({
		width:200,
		height:200
	});
}).mouseout(function(){
	$(this).animate({
		width:100,
		height:100
	});
});

サンプル1

ここまでは普通ですね。では、以下のようにdivの内側にp要素があった場合はどうなるでしょうか?

<div><p>ボックス!</p></div>

サンプル2

変なアニメーションを繰り返すようになりますね。これはイベントバブリングが原因です。p要素で発生したmouseoverイベントやmouseoutイベントが親要素であるdiv要素に伝播し、アニメーションキューに貯まっていきアニメーションが複数回実行されるわけです。このイベントバブリングが邪魔な際に利用できるのmouseenterメソッドとmouseleaveメソッドです。

mouseenterメソッドとmouseleaveメソッド

先ほどイベントをmouseenterメソッドとmouseleaveメソッドに変えてみましょう。

$("div").mouseenter(function(){
	$(this).animate({
		width:200,
		height:200
	});
}).mouseleave(function(){
	$(this).animate({
		width:100,
		height:100
	});
});

サンプル3

p要素にマウスを乗せてもアニメーションは発生しませんね。このようにイベントバブリングを無視し指定した要素だけでイベントを実行するのがmouseenterメソッドとmouseleaveメソッドです。

ちなみにアニメーション中にp要素の位置がズレてウザイと感じる場合は以下のCSSを追加してください。

div{
	width:100px;
	height:100px;
	background: red;
	overflow: visible!important;
}

サンプル4

jQueryのanimateメソッドはアニメーション中にアニメーション要素を「overflow:hidden」に変更するので、その関係でmarginの相殺がおこならくなってしまうためです。

hoverメソッド

jQueryではmouseenterメソッドとmouseleaveメソッドのショートカットメソッドとしてhoverメソッドが用意されており、上記のスクリプトは以下のようにも書くことができます。

$("div").hover(function(){
	$(this).animate({
		width:200,
		height:200
	});
},function(){
	$(this).animate({
		width:100,
		height:100
	});
});

サンプル5

多くのケースではmouseenterメソッドとmouseleaveメソッドのほうが使い勝手が良いので普段使いにはこちらが使いやすいです。

あと、jQuery Advent Calendar 2013はまだ空きがあるので興味がある人はjQueryについて何か書いてみませんか?

関連エントリー

jQuery基礎文法最速マスター
jQueryを良くする25のTIPS
14のjQueryベストプラクティス
8のjQueryのすごいTIPS
Re:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips

スポンサードリンク

«イベントデリゲートで理解するjQueryのonメソッド | メイン | jQueryのstopメソッドとfinishメソッド»

このエントリーのトラックバックURL
コメントを投稿