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

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

.triggerHandler( )イベント発生時の処理を実行します(ただしブラウザ標準の処理はしない)

構文

イベント発生時の処理を実行します(ただしブラウザ標準の処理はしない)返値:jQueryオブジェクト
jQo.triggerHandler( イベント名 [,配列] )ver1.2〜

機能

jQueryオブジェクトで指定した要素に設定されたイベント発生時の処理(function)を実行します。このときブラウザ標準の機能は実行されません。例えば引数にsubmitを設定してもデータの送信は行いません。
ブラウザ標準の処理も実行したい場合はtriggerメソッドを利用してください。
handlerとはイベント発生時に実行する処理でjQueryではfunctionで設定されます。なので「functionだけが実行されるからhandlerとついている」と覚えましょう。

第2引数に配列を設定すると、イベント発生時の処理(function)にデータを渡すことができます。 また、triggerHandlerメソッドによるイベントはバブリングしません(ページ最下段のメモを参照)。

解説

イベント発生時の処理を実行

サンプル(triggerHandler/01.html)を開いてbody内にtextタイプのinput要素とbutton要素があることを確認してください。jQueryは以下の部分を最初に確認してください。

onメソッド(bindメソッドの構文)によってinput要素が選択(フォーカス)されたら、valメソッドを利用して「フォーカスされたよ」とinput内に表示します。

$("input").on("focus", function(eo){
	$(this).val("フォーカスされたよ");
});

実際にinput要素を選択(フォーカス)するとinput内に文字が表示されます。ここで確認しておくのが左図のようにinput要素に枠が付いていることです(ブラウザによって演出が異なります、例えばmacのsafariでは青枠が付きます)。これは、現在どこが選択されているか分かるようにする「ブラウザ標準の機能」です

続いてbuttonの処理を設定している以下の部分を確認して下さい。buttonをクリックすると、triggerHandlerメソッドを利用してinput要素に設定されたfocusイベントに設定された処理(function)を実行します。

$("button").click(function(){
	$("input").triggerHandler("focus");	
});

実際にbuttonをクリックするとinput要素に「フォーカスされたよ」と表示されます。ここで着目するのが左図のようにinput要素に「枠が付いてない」点です。枠を付けるのは「ブラウザ標準の機能」ですが、triggerHandlerメソッドはそれを処理しないため枠が付かないのです

triggerとの比較

サンプルtriggerHandler/01.htmlではbuttonをクリックした時にinput要素に枠が付きませんでした。しかしbuttonをクリックしてbuttonが選択された状態だから当然なのでは?と感じるかもしれません。そこで似たような処理のtriggerメソッドと比較します。

サンプル(trigger/01.html)を開いてbody内の構成がtriggerHandler/01.htmlと同じ事を確認して下さい。jQueryもほとんど同じで、以下の様にtriggerHandlerの部分がtriggerメソッドに変更されているだけです。

$("button").click(function(){
	$("input").trigger("focus");	
});

結果として、buttonをクリックするとtriggerHandler/01.htmlとは異なりinput要素に枠が付きます。triggerメソッドの場合はブラウザ標準の処理も行うのです。ケースに合わせ使い分けましょう。

配列でイベント発生時の処理に引数を渡す

triggerHandlerメソッドは第2引数に配列を設定することで、イベント発生時の処理(function)に引数を渡すことができます。サンプル(triggerHandler/03.html)を開いてbody内の構成がtriggerHandler/01.htmlと同じ事を確認してください。

jQueryは少し変更され、引数に設定したfunctionの第2引数にaaaを追加しました(第1引数の場所はイベントオブジェクトです)。受け取った値はvalメソッドに利用して、input要素内に表示します。

$("input").on("focus", function(eo, aaa){
	$(this).val(aaa);
});

引数を渡すtriggerHandlerメソッドの設定は以下の様に、第2引数に配列を追加します(配列であることに注意してください)。この配列内の値がfunctionの引数aaaに渡されます。

$("button").click(function(){
	$("input").triggerHandler("focus", ["トリガーハンドラー"]);	
});

結果として、buttonをクリックするとinput要素内に「トリガーハンドラー」と表示されます。

配列でイベント発生時の処理に引数を渡す(その2)

複数の情報を渡したい場合は、配列の要素を増やすだけです。サンプル(triggerHandler/03b.html)を開いてbody内の構成がtriggerHandler/03.htmlと同じ事を確認してください。

jQueryでは、まず以下の部分を確認してください。functionに設定した引数を増やしています(サンプルではbbbが追加されています)。

$("input").on("focus", function(eo, aaa, bbb){
	$(this).val(aaa + "と" + bbb);
});

引数を渡すtriggerHandlerメソッドでは、以下の様に配列の要素を増やしています。渡す方が配列なのに、受け取る方は配列ではありません。混乱しないように注意しましょう

$("button").click(function(){
	$("input").triggerHandler("focus", ["トリガー", "ハンドラー"]);	
});

buttonをクリックすると2つの引数が渡されinput要素に「トリガーとハンドラー」と表示されます。

関連項目

ブラウザ標準の処理を実行したい場合はtriggerメソッドを利用します。

メモ

onメソッドやdelegateメソッドで設定されたイベント処理には利用できません

triggerHandlerメソッドで実行したイベントはバブリング(イベントが伝播)しません。そのためdelegateメソッドやonメソッド(delegateメソッドの構文)で設定されたイベント発生時の処理(function)を実行することはできません。

サンプル(triggerHandler/test01.html)を開いてbody内の構成がtriggerHandler/01.htmlと同じ事を確認してください。jQueryもほとんどtriggerHandler/01.htmlと同じで、異なるのは以下の様にonメソッドがdelegateメソッドの構文(第2引数にセレクタを設定)になっている点だけです。

$("body").on("focus", "input", function(eo){
	$(this).val("フォーカスされたよ");
});
$("button").click(function(){
	$("input").triggerHandler("focus");	
});

結果として、buttonをクリックしてもinput要素内に文字が表示されません。イベントがバブリングしないため、調査範囲内にあるか調べることができないのです(onメソッドやdelegateメソッドは、調査範囲に上がってきたイベントをキャッチして処理するのです)。

それに対しtriggerメソッドでは、onメソッドやdelegateメソッドで設定されたイベントにも利用できます。
→参考:サンプル(trigger/test01.html

複数の要素に対応していません

triggerHandlerメソッドはセレクタで指定した要素が複数ある場合、最初の要素に設定されたイベント発生時の処理しか実行しません。サンプル(triggerHandler/test02.html)を開いてbody内のinput要素が3つになっているのを確認してください。

<input type="text" />
<input type="text" />
<input type="text" />
<button>CLICK</button>

jQueryの処理はtriggerHandler/01.htmlとまったく同じです。

$("button").click(function(){
	$("input").triggerHandler("focus");	
});

buttonをクリックすると最初のinput要素にしか「フォーカスされたよ」と表示されず、triggerHandlerメソッドが複数の要素に対応していないことが確認できます。
triggerメソッドは複数の要素に対応しています。→サンプル(trigger/test04.html