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

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

jQuery.Event( )イベントオブジェクトの作成

構文

イベントオブジェクトの作成返値:イベントオブジェクト
jQuery.Event( イベント名 )ver1.0〜
jQuery.Event( イベント名, object )ver1.6〜

機能

イベントオブジェクトを作成します。イベントオブジェクトとはイベント発生時に実行するfunctionに渡されるobjectオブジェクトで、様々なプロパティやメソッドを持っています。
自作したイベントオブジェクトは現状ではtriggerでしか利用しません。

ver1.6からは第2引数にobjectオブジェクトを設定することで、イベント発生時に実行するfunctionに情報を渡すことができます。

解説

イベントオブジェクトを作成する

サンプル(event/01.html)を開いてbody内にdiv要素とbutton要素があることを確認してください。jQueryでは、まず以下の様にonメソッドを利用して、div要素をクリックしたらアラートで「click」と表示するようにしています。functionの引数としてイベントオブジェクト(サンプルでは変数eo)を受け取っていますが利用はしていません。この処理により、div要素をクリックするとアラートで「click」と表示されます。

$("div").on("click", function (eo){
	alert("click");
});

そしてポイントは以下の部分です。2行目でjQuery.Eventメソッドを利用して「click」のイベントオブジェクトを作成して変数eoに代入しています。そして、そのイベントオブジェクトをtriggerメソッドの引数に利用することで、セレクタのdiv要素に設定されたクリック時の処理(function)を実行することができます。

$("button").click(function(){
	var eo = jQuery.Event("click");
	jQuery("div").trigger(eo); 
});

結果として、buttonをクリックするとdiv要素をクリックしたのと同じようにアラートで「click」と表示されます。javaScriptではオブジェクトを作成する際には「new演算子」を利用するのですが、イベントオブジェクトは利用しません。しかし「new演算子」を付けてもOKです。→サンプル(event/01b.html

$("button").click(function(){
	var eo = new jQuery.Event("click");
	jQuery("div").trigger(eo); 
});

objectオブジェクトをfunctionに渡す

v1.6からは第2引数にobjectオブジェクトを設定することで、functionに情報を渡すことができます。サンプル(event/02.html)を開いてbody内の構成はevent/01.htmlと同じ事を確認してください。

jQueryもほとんど同じで、異なるのは以下のようにjQuery.Eventの第2引数にobjectオブジェクトが設定されている点だけです。objectオブジェクトにはtestプロパティが作成され値として10が設定されています。
この処理によってイベントオブジェクトにtestプロパティ(値は10)が追加されます

$("button").click(function(){
	var eo = jQuery.Event("click", {test:10});
	jQuery("div").trigger(eo); 
});

続いてtriggerメソッドによって実行されるclickイベントの処理を確認します。以下の様に受け取ったイベントオブジェクト(eo)のtestプロパティの値をアラートで表示します。

$("div").on("click", function (eo){
	alert(eo.test);
});

結果として、buttonをクリックするとイベントオブジェクトに設定されたtestプロパティの値「10」が表示されます。div要素をクリックした場合はtestプロパティは送られないため「undefined」と表示されます。

clickメソッドなどにもobjectオブジェクトでfunctionにデータを渡すことができますが、その場合はdataプロパティを通して渡すことになります。しかし、このサンプルではイベントオブジェクトに直接プロパティを追加しているためdataプロパティを介する必要はありません

関連項目

jQueryのイベントオブジェクトには多数のプロパティやメソッドが設定されています。これらは正規化(ブラウザ間の差異が吸収)されているため、どのブラウザでも同じように機能します

メモ

イベントオブジェクトを削除してしまうメソッド

イベントオブジェクトに利用するメソッドの中にはイベントオブジェクトを削除してしまうものがあります。サンプル(event/test01.html)を開いてbody内の構成がevent/01.htmlと同じ事を確認してください。

jQueryもほとんど同じで、異なるのは以下のようにイベントオブジェクトに対してstopPropagationメソッドが利用されている点だけです。

$("button").click(function(){
	var eo = jQuery.Event("click");
	eo.stopPropagation();
	jQuery("div").trigger(eo); 
});

結果として、event/01.htmlと異なりbuttonをクリックしてもアラートが表示されません。これはイベントオブジェクト「eo」がstopPropagationメソッドによって削除されたためtriggerメソッドが処理できないからです。

他にもstopImmediatePropagationメソッドがイベントオブジェクトを削除してしまいます。この2つのメソッドはイベントフローを停止させる機能があるので、たぶんイベントオブジェクトを削除することでイベントの流れを止めているのでしょう。

jQueryのイベントオブジェクトにはjavaScriptのイベントオブジェクトプロパティも付属します

jQueryのイベントオブジェクトはjavaScriptのイベントオブジェクトも継承しているため、javaScriptのイベントオブジェクトのプロパティやメソッドも利用することができます。

サンプル(event/test02.html)を開いてbody内にdiv要素が1つあることを確認してください。jQueryは以下の様に記述され、div要素がクリックされたら、受けたったイベントオブジェクト(eo)のscreenXプロパティの値をアラートで表示します。
イベントオブジェクトはjQuery.Eventで作成しなくても、デフォルトでイベントハンドラの第1引数に渡されます。

$("div").on("click", function (eo){
	alert(eo.screenX);
});

screenXプロパティはjQueryのプロパティではなくjavaScriptが持つプロパティで、イベントが発生した「モニター上のX座標(ページ上ではありません)」の値が入っています。結果として、div要素をクリックするとクリックした座標(モニター上の座標)のX座標が表示されます。

javaScriptのイベントオブジェクトに設定されるプロパティは環境によって差があり、すべての環境で利用できるとは限らないことに注意してください。しかし環境に特有なプロパティを調査することで、スマートフォンの処理などもできるのです。