jQuery逆引きリファレンス
マウスポインターが要素に出入りした時の処理を実装するには？（mouseover、mouseout、mouseenter、mouseleave、hover）
違いが分かりにくい「mouseover／mouseout」と「mouseenter／mouseleave」イベントの使い分け方法を解説。また、これらに関連する「hover」イベントメソッドについても説明する。
別稿「イベントに応じて処理を実行するには？」の表でも触れたように、jQueryではさまざまな＜イベント名＞メソッドが標準で用意されています。そのうち、ほとんどが直感的に理解できるものばかりですが、mouseover／mouseoutとmouseenter／mouseleaveの違いは一見して分かりにくいものです。
本稿では、具体的なサンプルの中で、両者の違いを示すと共に、マウスの出入りを簡単に検出するhoverメソッドについても触れます。
mouseover／mouseoutとmouseenter／mouseleaveイベントの基本
まずは、具体的なサンプルを見てみます。以下は、マウスポインターが画像に乗った時に画像を切り替え、外れた時に元に戻すサンプルです。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<img id="icon" src="https:///re.buildinsider.net/web/jqueryref/index/icon.s.png" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
$('#icon')
// マウスポインターが画像に乗った時の動作
.mouseover(function(e) {
$(this).attr('src', 'https:///re.buildinsider.net/web/jqueryref/index/icon.l.png');
})
// マウスポインターが画像から外れた時の動作
.mouseout(function(e) {
$(this).attr('src', 'https:///re.buildinsider.net/web/jqueryref/index/icon.s.png');
});
});
</script>
</body>
</html>
|
画像にマウスカーソルを乗せると……
それぞれmouseover、mouseoutイベントのタイミングで画像（src属性）を変更しているわけです。mouseover、mouseoutをmouseenter、mouseleaveに置き換えても、このサンプルはそのまま動作します。
mouseover／mouseoutとmouseenter／mouseleaveの違い
基本的な挙動は同じであることを確認できたところで、両者が異なるケースを見ていきます。両者が異なる挙動を採るのは、要素が入れ子になっているようなケースです。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<style>
#parent { height: 200px; width: 200px; margin-left: 50px; padding: 10px; border: 3px solid #000; }
#child { height: 100px; width: 100px; margin-left: 40px; padding: 10px; border: 2px solid #F00; }
</style>
</head>
<body>
<div id="parent">
親（parent）
<p id="child">
子（child）
</p>
</div>
<div id="result"></div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
$('#parent')
// マウスポインターが画像に乗った時の動作
.mouseover(function(e) {
console.log('mouseover:' + e.target.id);
})
// マウスポインターが画像から外れた時の動作
.mouseout(function(e) {
console.log('mouseout:' + e.target.id);
});
});
</script>
</body>
</html>
|
このようなページに対して、対象の要素を横一線に横断するようにマウスポインターを動かした場合の結果は以下の通りです。
mouseover／mouseoutイベントが、外側の要素を出入りした時だけでなく、外側⇔内側の要素を出入りした時にも発生したことが確認できます。
では、上のコードを、それぞれmouseenter／mouseleaveイベントで書き換えてみるとどうでしょう。同じようにマウスポインターを動かしてみると、以下のような結果になります。
今度は、外側の要素に出入りした場合にだけイベントが発生し、外側⇔内側の要素を行き来した場合にはイベントは発生しないことが確認できます。
mouseenter／mouseleaveイベントを1つにまとめる
mouseenter／mouseleaveは、その性質上、まとめて利用することが多いイベントです。そこでjQueryでは、これらをひとまとめに設定するためにhoverというメソッドを用意しています。
［構文］hoverメソッド
function(e) {
……mouseenterイベントに対応する処理……
},
function(e) {
……mouseleaveイベントに対応する処理……
}
);
例えば以下は、冒頭のサンプルをhoverメソッドで置き換えた例です。mouseenter／mouseleaveイベントの処理を1つのブロックの中で表現できるので、両者がひとまとまりであるということをより明示的に表現できます。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<img id="icon" src="https:///re.buildinsider.net/web/jqueryref/index/icon.s.png" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
$('#icon').hover(
// マウスポインターが画像に乗った時の動作
function(e) {
$(this).attr('src', 'https:///re.buildinsider.net/web/jqueryref/index/icon.l.png');
},
// マウスポインターが画像から外れた時の動作
function(e) {
$(this).attr('src', 'https:///re.buildinsider.net/web/jqueryref/index/icon.s.png');
}
);
});
</script>
</body>
</html>
|
※以下では、本稿の前後を合わせて5回分（第17回～第21回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
17. 文書ツリー上に存在しない要素に対してイベントリスナーを追加するには？（on）
onメソッドを利用して、動的に新規追加された要素にイベントリスナーを設置する方法を解説。またjQuery 1.6以前のbind／live／delegateメソッドをonメソッドに置き換える方法も説明する。
19. 【現在、表示中】≫ マウスポインターが要素に出入りした時の処理を実装するには？（mouseover、mouseout、mouseenter、mouseleave、hover）
違いが分かりにくい「mouseover／mouseout」と「mouseenter／mouseleave」イベントの使い分け方法を解説。また、これらに関連する「hover」イベントメソッドについても説明する。
21. イベントが発生した時のマウス情報を取得するには？（イベントオブジェクト）
クリックした位置の座標や、押されたマウスボタンの種類といったマウス情報を、イベントオブジェクトの各種プロパティを使って取得する方法を説明する。
