jQueryのmouseenterとmouseoverの違いについて | なんかいろいろデザインする人

どうも、レーウィンです。
今回はmouseenterとmouseoverの違い、そしてmouseleaveとmouseoutの違いについて簡単に解説します。
サンプルは時間に余裕がある時に上げます。先に記事だけ。

mouseenterとmouseoverについてを中心に解説します。mouseleaveとmouseoutにも同じことが言えるので、そちらは補足程度に抑えて省略します。

どちらも要素に対してマウスカーソルが乗った時に発火するイベント

mouseenterもmouseoverも両方マウスカーソルが指定した要素に乗った時に発火するイベントです。
じゃあ何が違うの？って部分ですが、結論から言うと子要素に乗った時にイベントが再度発火するかどうかが違います。

では、もう少し詳しく解説していきます！

HTML

<p class="btn"><a href="/">TOPページに戻る</a></p>

今回はボタンを例にしていきます。CSSに関しては省略。

mouseenterについて

$(".btn").mouseenter(function(){
	console.log("mouseenter");
});

この場合、「TOPページに戻る」の文字にカーソルを合わせた時、console.logは何回発火するかというと、１回です。
これに関しては特に説明は不要ですよね。
mouseleaveも同じで、「TOPページに戻る」の文字にカーソルを合わせてる状態から.btnの外にマウスを移動させると１回発火します。

mouseoverについて

$(".btn").mouseover(function(){
	console.log("mouseover");
});

この場合、「TOPページに戻る」の文字にカーソルを合わせた時、console.logは何回発火するかというと、２回です。
どういうことかというと、「.btnにマウスが乗った時」に１回と、「.btnの子要素であるaタグに乗った時」に１回で合計２回です。
はい、mouseoverというのは指定した要素の中にある子要素にマウスが乗った時にも発火するんです。
mouseoutも同じで、「TOPページに戻る」の文字にカーソルを合わせてる状態から.btnの外にマウスを移動させると２回発火します。

mouseoverの使い道って？

子要素にマウスが乗った時にも発火って使うことなくない？って話ですが、まあ、ほとんど使うことはないです。なのでほとんどの場合はmouseenter/mouseleaveを使えば済みます。
皆mouseenter/mouseleaveを使おう！
・・・で済むのも雑なので、mouseover/mouseoutの使い方の一例を。
まず一番わかりやすい例が親要素が画面外に存在していて、子要素は画面内に存在している時ですね。
ここで、子要素にマウスを乗せた時に親要素に何かしたいとなったらmouseoverを使用するとmouseenterよりコード量が少なくなります。
あとは、子要素にカーソルを乗せる度に親要素が変化するといったこともできます。子要素にマウスをのせたりマウスを外したりする度に親要素の背景色がアニメーション変化する、みたいなやつはmouseoverを使うと楽になったりもします。
とはいえ、ほとんど限定的なものになってしまうので、結論としては「皆mouseenter/mouseleaveを使おう！」ってことで！では！

補足として、hoverについて

はい、jQueryにはもう１つマウスを乗せた時に発火するイベントがありますね。hoverです。

$(".btn").hover(
	function(){
		console.log("hoverしたよ！");
	},
	function() {
		console.log("hoverが外れたよ！");
	});

このhoverについてはmouseenter/mouseleaveとほとんど同じ挙動をします。
（一応、処理速度に変化があるかなーくらいの差はあります）
ではでは～。