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

.delegateTarget調査範囲のDOM要素を取得

構文

調査範囲のDOM要素を取得返値：DOM要素
イベントオブジェクト.delegateTargetver1.7〜

機能

イベントオブジェクトのdelegateTargetプロパティを利用すると調査範囲に設定されたDOM要素を取得します。

調査範囲とはdelegateメソッドやdelegateメソッドの構文のonメソッドでしか設定されません。
それ以外で利用した場合はcurrentTargetプロパティと同じ処理になります。

解説

調査範囲のDOM要素を取得

サンプル（delegateTarget/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は以下の様に記述され、delegateメソッドの構文でonメソッドが利用されています。この処理により、id属性がblueの要素をクリックするとイベントオブジェクト「eo」のdelegateTargetプロパティによって取得された要素のid属性をアラートで表示します。
バブリングの仕組みにより、blueの内側にあるredやgreenのid属性をもったdivをクリックしてもOKです。 

$("body").on("click", "#blue", function(eo){
	alert(eo.delegateTarget.id);
});

結果として、どのdiv要素をクリックしてもonメソッドの調査範囲として設定されたbody要素のid属性「imBODY」がアラートで表示されます。

念のため調査範囲を変更したサンプルでも機能を確認してみました。サンプル（delegateTarget/01b.html）を開いてbody内の構成がdelegateTarget/01.htmlと同じ事を確認してください。jQueryは以下の用にonの「調査範囲」と「セレクタ」の部分を変更しました。 

$("#blue").on("click", "#green", function(eo){
	alert(eo.delegateTarget.id);
});

セレクタをgreenの要素に変更したので、greenの要素をクリックしてください。調査範囲に設定したid属性のblueの値がアラートで表示されます。

取得した要素の操作

delegateTargetで取得したDOM要素はjQuery(セレクタ)を利用しjQueryオブジェクトに変換すれば、jQueryで操作できるようになります。サンプル（delegateTarget/02.html）を開いてbody内の構成がdelegateTarget/01.htmlと同じ事を確認してください。

続いてjQueryを確認してください。以下の様にdelegateTargetで取得したDOM要素を$（jQueryの省略型）の引数に設定し、jQueryオブジェクトに変換したのちaddClassメソッドを利用してtestのクラス属性（背景色をグレーにする設定がされています）を付加しています。 

$("body").on("click", "#blue", function(eo){
	$(eo.delegateTarget).addClass("test");
});

結果として、どのdiv要素をクリックしても調査範囲であるbody要素の背景色がグレーになります。

関連項目

イベントが発生したDOM要素を取得したい場合はtargetプロパティを利用します。
イベントが伝わっている現在のDOM要素を取得したい場合はcurrentTargetプロパティを利用します。

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

メモ

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