デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.relatedTargetイベントの発生に関連したDOM要素の取得

構文

イベントの発生に関連したDOM要素の取得返値:DOM要素
イベントオブジェクト.relatedTargetver1.1.4〜

機能

このプロパティを利用できるイベントはmouseoverイベント/mouseoutイベント/mouseenterイベント/mouseleaveイベントだけです。

イベントに関連した要素は利用するイベントによって異なります。mouseoverイベントmouseenterイベントのように要素内に入る時に実行されるイベントでは「要素に入る前の要素」を取得します。

mouseoutイベントmouseleaveイベントのように要素から出る時に実行されるイベントでは「要素から出た後の要素」を取得します。

解説

mouseover/mouseenterの例(要素に入る前のDOM要素を取得)

サンプル(relatedTarget/01.html)を開いてbody内に3つのdiv要素があることを確認してください。div要素はid属性が付けられ、内側(子孫要素)から「green」「red」「blue」となっています。またbody要素にも「imBODY」とid属性が設定されています。

<body id="imBODY">
	<div id="blue">
		<div id="red">
			<div id="green"></div>
		</div>
	</div>
</body>

jQueryは以下の様に記述され、blueのid属性を持つ要素にマウスオーバーしたらrelatedTargetプロパティを利用して要素を取得し、そのid属性をアラートで表示します。 バブリングの仕組みにより、blueの内側にあるredやgreenのid属性をもったdiv要素にマウスオーバーしてもアラートがでます。

$("#blue").mouseover(function(eo){
	alert(eo.relatedTarget.id);
	eo.stopPropagation();
});

結果として、div要素にマウスオーバーすると、イベント発生前にマウスカーソルが存在したDOM要素のid属性を表示します。例えば一番外側の青いdiv要素にマウスオーバーすると、relatedTargetプロパティによって、その前にマウスカーソルが存在していたbody要素が取得され、そのid属性の値である「imBODY」がアラートで表示されます。

mouseout/mouseleaveの例(要素から出た後のDOM要素を取得)

サンプル(relatedTarget/01b.html)を開いてbody内の構成がrelatedTarget/01.htmlと同じ事を確認してください。jQueryも殆ど同じなのですが、以下の様にイベントがmouseoverからmouseoutに変更されています。

$("#blue").mouseout(function(eo){
	alert(eo.relatedTarget.id);
	eo.stopPropagation();
});

実際にカーソルを操作してmouseoutイベントが発生するようにしてください。要素から出た後の要素のidが表示されます。例えば青いdiv要素から赤いdiv要素に移動した場合は、赤いdiv要素のidであるredが表示されます。

関連項目

イベントが発生したDOM要素を取得したい場合はtargetプロパティを利用します。

バブリングについても理解しておいた方がよいでしょう。バブリングは使い方で紹介しています。
→参考:使い方「イベントフロー(1)」

メモ

何に使うかよく分かりませんが、思いついたらサンプルを追加しようと思います。