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

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

.targetイベントが発生したDOM要素の取得

構文

イベントが発生したDOM要素の取得返値:DOM要素
イベントオブジェクト.targetver1.0〜

機能

イベントオブジェクトのtargetプロパティを利用するとイベントが発生したDOM要素を取得します。このプロパティをよく知るためには、イベントの流れ(イベントフロー)について理解していた方が良いでしょう。これは使い方で紹介しています。→参考:使い方「イベントフロー(1)」

解説

バブリングの確認

targetプロパティを理解するために、先にイベントが先祖要素に伝わるバブリングについて説明します。
サンプル(target/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の要素をクリックするとアラートで「click」と表示します。

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

セレクタは「id属性がblueの要素」に設定されていますが、一番内側にあるgreenのid属性が設定されたdiv要素をクリックしてください。セレクタが一致しないのにアラートが表示されるはずです。これは「greenのid属性」で発生した要素がイベントが先祖要素に伝わって「id属性がblueの要素」に到達するためです。

おかしな仕様に感じるかもしれませんが「greenのid属性」は「id属性がblueの要素」に含まれるのですから、「greenのid属性」をクリックしても「id属性がblueの要素」が反応するのは不思議ではありません。この様にイベントが先祖方向に伝わるのを「バブリング」呼びます。

バブリングとtargetプロパティの可能性

バブリングの仕組みとtargetプロパティを利用すると、入れ子構造になっている要素の処理をシンプルに記述することができます。サンプル(target/02.html)を開いてbody内の構成がtarget/01.htmlと同じ事を確認してください。

jQueryは少しだけ変更され、id属性がblueの要素をクリックするとtargetプロパティによって取得された要素のid属性をアラートで表示します。

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

結果として、セレクタが「id属性がblue」だけなのにかかわらず、緑のdiv要素をクリックすれば「green」、赤のdiv要素をクリックすれば「red」と表示されます。この仕組みを利用すれば複数の要素にまとめて処理を設定できます(処理内容はtargetプロパティで振り分ける)。

取得した要素の操作

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

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

$("#blue").click(function(eo){
	$(eo.target).addClass("test");
});

結果として、クリックしたdiv要素に黒枠が付加されます。

関連項目

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

メモ

delegateメソッドの仕組みはtargetプロパティのおかげ

delegateメソッドやdelgateメソッドの構文を利用したonメソッドは、このtargetプロパティが伝わってくるのを利用して実現しています。調査範囲に設定された要素でバブリングしてきたイベントをキャッチし、そのイベントのtargetプロパティが引数に設定されたセレクタと一致したらfunctionを実行するようにしているのです。

バブリングの再確認

バブリングの仕組みを理解していないと、思いも寄らない結果に戸惑うことになります。
サンプル(target/test01.html)を開いてbody内の構成がtarget/02.htmlと同じ事を確認してください。

jQueryもほとんど同じなのですが、以下の様にセレクタがdiv要素に変更されています。

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

このサンプルで、一番内側にあるgreenのid属性が設定されたdiv要素をクリックしてください。アラートが「green」,「green」,「green」と3回表示されます。これはイベントが緑のdiv要素からバブリングによって赤のdiv要素に伝わり、そこでもセレクタがdiv要素と一致しているためfunctionが実行され、2回目のアラートが表示されます。そして、同じ要領で青のdiv要素でもfunctionが実行され、合計で3回のアラートが表示されるわけです。

戸惑わないように、バブリングを理解するようにしましょう。
ちなみに、この仕組みはcurrentTargetプロパティのページで活用します。