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

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

.currentTargetイベントが伝播している際の現在のDOM要素を取得

構文

イベントが伝播している際の現在のDOM要素を取得返値:DOM要素
イベントオブジェクト.currentTargetver1.3〜

機能

イベントオブジェクトのcurrentTargetプロパティを利用するとバブリング中のイベントが現在通過しているDOM要素を取得します。バブリングとはイベントが発生した要素から先祖方向に伝わる仕組みのことです。

currentTargetプロパティはtargetプロパティから派生しています。なので、先にtargetプロパティを理解しておいて下さい。また、使い方のイベントフローも参考にして下さい。
→参考:使い方「イベントフロー(1)」

解説

targetプロパティとの違いを確認

currentTargetプロパティはtargetプロパティから派生し、v1.3で追加されました。まずはtargetプロパティとの違いを確認します。

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

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

jQueryは以下の様に記述され、id属性がblueの要素をクリックするとcurrentTargetプロパティによって取得された要素のid属性をアラートで表示します。

$("#blue").click(function(eo){
	alert(eo.currentTarget.id);
});

結果として、どのdiv要素をクリックしても「blue」としか表示されません。targetプロパティのサンプル(target/02.html)では、クリックしたdivのidが表示されたのと異なっています。

これはcurrentTargetプロパティが「現在のDOM要素を取得」するためです。セレクタに「id属性がblueの要素」が設定されているので、functionが実行されるのは「id属性がblueの要素」にイベントが伝わった時です。ですから、そこで現在のDOM要素を取得され、常に「blue」の表示となるのです。

これでは使い道がないように感じますが、バブリングの仕組みを活用することで入れ子構造の要素をまとめて処理できます

親の要素もまとめて処理する

サンプル(currentTarget/02.html)を開いてbody内の構成がcurrentTarget/01.htmlと同じことを確認してください。jQueryもほとんど同じで、異なるのは以下の様にセレクタがdivに変更された点だけです。

$("div").click(function(eo){
	alert(eo.currentTarget.id);
});

このサンプルで、一番内側にあるgreenのid属性が設定されたdiv要素をクリックしてください。アラートが「green」「red」「blue」と3回表示されます。

これはtargetプロパティのサンプルと同じように、バブリングにとってイベントが先祖の要素に伝わり、セレクタのdiv要素と一致する度にfunctionが実行されるためです。currentTargetでは現在イベントが通過している要素が取得できるため、このようにid属性の名前が順々に表示されるのです。

発生したイベントは先祖方向にしか伝播しません。ですから赤いdiv要素をクリックした場合は緑のdiv要素にはイベントは伝わらず、青いdiv要素にのみ伝わります。

取得した要素の操作

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

続いてjQueryを確認してください。以下の様にcurrentTargetプロパティで取得したDOM要素を「$(jQueryの省略型)」の引数に設定し、jQueryオブジェクトに変換したのちaddClassメソッドを利用してtestのクラス属性(黒枠を表示する設定がされています)を付加しています。

$("div").click(function(eo){
	$(eo.currentTarget).addClass("test");
});

結果として、一番内側の緑のdiv要素をクリックするとイベントが親要素に伝わって、全てのdiv要素に黒枠が付加されます。

関連項目

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

メモ

thisと同じ機能です

jQuery中で利用される「this」は、このcurrentTargetの値と同じです。
サンプル(currentTarget/test01.html)を開いてbody内の構成がcurrentTarget/03.htmlと同じ事を確認してください。jQueryもほとんど同じで「eo.currentTarget」の部分が以下の様に「this」に置き換わっているだけです。

$("div").click(function(eo){
	$(this).addClass("test");
});

結果として、サンプルcurrentTarget/03.htmlと全く同じ動作をします。