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

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

.dataイベント発生時に実行するfunctionに渡された情報の取得

構文

イベント発生時に実行するfunctionに渡された情報の取得返値:なし
イベントオブジェクト.dataver1.1〜

機能

イベントオブジェクトのdataプロパティを利用するとイベント発生時に実行するfunctionに渡された情報を取得できます。

解説

イベント発生時に実行するfunctionに渡された情報を取得します

サンプル(data/01.html)を開いてbody内にdiv要素が1つあることを確認してください。jQueryでは、まず以下の部分を確認してください。新規にObjectオブジェクト「myObj」を作成し、それにtestプロパティを設定して値10を代入しています。

var myObj = new Object();
myObj.test = 10;

作成されたmyObjは、以下の様にclickメソッドの第1引数に設定することで、第2引数に設定したfunction「clickFunc」に情報を送ることができます。

$(function () {
	$("div").click(myObj, clickFunc);
});

clickFuncの処理は以下の様に記述されています。渡されたobjectオブジェクトはイベントオブジェクト「eo」のdataプロパティに格納されるため、objectオブジェクトに設定したtestプロパティの値を得るためには以下の様に「eo.data」の後にプロパティ名を記述します。

function clickFunc(eo){
	alert(eo.data.test)
}

結果として、div要素をクリックするとobjectオブジェクトで渡したtestプロパティの値「10」がアラートで表示されます。構造が分かりにくくなりますが、objectオブジェクトを直接clickメソッドの引数に設定することも可能です。→サンプル(data/01b.html

$(function () {
	$("div").click({test:10}, clickFunc);
});

objectオブジェクトを設定する位置に注意

サンプルdata/01.htmlで利用したclickメソッドではobjectオブジェクトを第1引数に設定しましたが、利用するメソッドによっては異なる場所に設定します。

サンプル(data/02.html)を開いてbody内の構成がdata/01.htmlと同じ事を確認してください。jQueryもほとんど同じで、異なるのは以下の様にclickメソッドではなくonメソッドを利用している点だけです。

$(function () {
	$("body").on("click", "div", {test:10}, checkFunc);
});

onメソッドでは上記のように、objectオブジェクトは第3引数に設定されます。functionにデータを送りたい時は利用するメソッドの構文を確認するようにしましょう。

メモ

dataプロパティの使いどころ

dataプロパティを利用してイベントハンドラにデータを渡す仕組みは、様々な用途に利用できる可能性をもっています。具体的には共通のfunction(イベント発生時の処理)に個別の機能を持たせることができます

サンプル(data/test01.html)を開いてbody内に2つのdiv要素が配置され、それぞれ異なるid属性(main, sub)が設定されているのを確認してください。

<div id="main">
	<div class="box"></div>
</div>
<div id="sub">
	<div class="box"></div>
</div>

jQueryは、まず以下の部分を確認してください。onメソッドによって2つのdiv要素とも共通のfunction「clickFunc」を設定しています。そしてポイントなのはobjectデータで、プロパティのmyNameに異なる値(John, Bob)を渡している点です。

$("#main").on("click", ".box", {myName:"John"}, clickFunc);
$("#sub").on("click", ".box", {myName:"Bob"}, clickFunc);

clickFuncでは以下の様に、受け取ったobjectオブジェクトのmyNameプロパティの値をアラートで表示しているだけです。

function clickFunc(eo){
	alert("my name is " + eo.data.myName)
}

結果として、上のdiv要素をクリックすると「my name is John」と表示され、下のdiv要素をクリックすると「my name is Bob」と表示されます。利用したfunction「clickFunc」は共通ですが、上と下のdiv要素で異なる動作をさせることができました。

要素ごとに「少しだけ異なる処理」を実行させたい場合は、dataプロパティで渡した値によって処理を分けると良いのかもしれません。