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

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

.trigger( )イベント処理を実行します(ブラウザ標準の処理も実行)

構文

イベント処理を実行します(ブラウザ標準の処理も実行)返値:jQueryオブジェクト
jQo.trigger( イベント名 [,配列] )ver1.0〜
jQo.trigger( イベントオブジェクト )ver1.3〜

機能

jQueryオブジェクトで指定した要素に設定された、第1引数のイベント処理を実行しますします。第2引数に配列を設定すると、イベント発生時の処理(function)に引数を渡すことができます。triggerメソッドはブラウザ標準の処理も実行します。ブラウザ標準の処理をしたくない場合はtriggerHandlerメソッドを利用してください。

v1.3から引数にイベントオブジェクトを利用できるようになりました。
イベントオブジェクトについてはjQuery.Eventで紹介しています。

解説

イベント処理を実行

サンプル(trigger/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をクリックすると、triggerメソッドを利用してinput要素に設定されたfocusのイベント処理を実行します。

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

結果として、buttonをクリックするとinput要素に「フォーカスされたよ」と表示されます。ここで着目するのが、input要素に「枠が付く」点です。buttonをクリックしたのですからフォーカスはbuttonにあるべきなのに、focusイベントがもつ「ブラウザ標準の機能」によりinput要素が選択(フォーカス)されたのです。

triggerHandlerメソッドではブラウザ標準の処理はされないため、input要素が選択(フォーカス)されません。→参考:サンプル(triggerHandler/01.html

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

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

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

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

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

$("button").click(function(){
	$("input").trigger("focus",["トリガ−"]);
});

結果として、buttonをクリックするとinput要素内に「トリガー」と表示されます。buttonではなくinput要素をクリックして選択(フォーカス)した場合は引数aaaを得られないため、何も表示されません。

イベントオブジェクトを利用する

v1.3から引数にイベントオブジェクトを利用できるようになりました。しかし私にはあまり理解できず、説明が間違っているかもしれません。とりあえず本家のページにイベントオブジェクトを利用したサンプルがあったので、それを元にサンプルを作成してみました。

本家のページでは、submitが実行された時にブラウザ標準の機能であるデータ送信がキャンセルされたら他の処理をするようなサンプルがありました。それを元に考えたのがサンプル(trigger/03.html)です。body内にはdiv要素が3つあり、一番上のdiv要素にのみtestのid属性が付いています。

<div id="test"></div>
<div></div>
<div></div>

jQueryでは、まず以下の様にtestのid属性を持つ要素(一番上のdiv要素)にだけカスタムイベント(自作のイベント)の「myClick」を設定しています。実行する処理はアラートで「bbb」と表示するだけです。

$("#test").bind("myClick", function(eo) {
	alert("bbb");
	eo.preventDefault();
});	

覚えておいて欲しいのはpreventDefaultメソッドを利用して、ブラウザ標準の機能を停止している点です。
div要素にはリンクやsubmitが設定されていないので、ブラウザ標準の機能をストップするというよりも、フラグを立てるような行為だと思います。

次にdiv要素がクリックされた時に実行する以下の処理を確認して下さい。2行目でjQuery.Eventを利用してカスタムイベント「myClick」のイベントオブジェクトを作成し、3行目でそれをtriggerメソッドの引数に利用しています。これによりクリックされたdiv要素にカスタムイベント「myClick」が付いていた場合は、それが実行されます(つまり一番上のdiv様子がクリックされた時)。

$("div").click(function(eo) {
	var customEO = jQuery.Event("myClick");
	$(this).trigger(customEO);
	if(!customEO.isDefaultPrevented()) {
		alert("aaa");
	}
});

一番上のdiv要素をクリックした時は、カスタムイベントのmyClickが実行され、ブラウザ標準の機能を停止します。すると4行目〜6行目のif文により、isDefaultPreventedメソッドを利用してブラウザ標準の機能が停止されているか否かを調査します。フラグの確認のような行為だと思います。

一番上のdiv要素では、実際に停止されているため{}内の処理(アラートでaaaと表示する)は実行されません。つまり一番上のdiv要素がクリックされると「bbb」は表示しますが「aaa」と表示するのはやめます。それ以外のdivをクリックした場合は、ブラウザ標準の機能は停止されていませんから4〜6行目の処理によってアラートで「aaa」と表示されます。

私が思うに、これは「割り込み処理」の設定なのだと思います。つまり本来の機能(aaaと表示する)ではなく、他の機能(bbbと表示する)を実行させています。なんとなく、プラグイン作成時に活躍するような気がします。
→google検索「jquery プラグイン 割り込み

イベントオブジェクトにプロパティを追加

本家のページのイベントオブジェクトを利用したサンプルは、もう1つあります。そのサンプルではイベントオブジェクトにオリジナルのプロパティを設定してfunctionに情報を渡すものでした。

サンプル(trigger/04.html)を開いてbody内にbutton要素が1つあることを確認してください。jQueryでは、まず以下の部分を確認してください。body要素にカスタムイベント「logged」を設定し、それにonメソッドを利用してfunctionを設定しています。

このfunctionはイベントオブジェクトのuserNameプロパティをアラートで表示するだけです。ポイントなのはjQueryが持つイベントオブジェクトのプロパティに「userName」というものは無い点です。

$("body").on("logged", function(eo){
	alert(eo.userName);	
});

では、どこでuserNameプロパティが設定されているかというと、以下のbutton要素に設定したクリック時に実行するfunctionの中です。まず2行目でカスタムイベント「logged」のイベントオブジェクトを作成し、3行目でuserNameというプロパティを設定し値として「john」を代入しています。

$("button").click(function(){
	var myEvent = jQuery.Event("logged");
	myEvent.userName = "john";
	$("body").trigger(myEvent);
});

そして、4行目でtriggerを利用してbody要素に設定されたカスタムイベント「logged」を実行するのです。結果として、buttonをクリックするとイベントオブジェクトのプロパティとして渡ったmyNameの値である「john」がアラートで表示されます。

関連項目

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

メモ

onメソッドやdelegateメソッドにも利用できます

似た機能を持つtriggerHandlerメソッドは、イベントが伝播しないためdelegateメソッドやonメソッド(delegateメソッドの構文)で設定したイベントの処理には利用できません。しかしtriggerメソッドはイベントが伝播するので利用できます。

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

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

結果としてはtrigger/01.htmlと変わらず、buttonをクリックするとinput要素内に文字を表示します。当たり前のように感じますがtriggerHandlerではバブリングしないため機能しません。
→参考:サンプル(triggerHandler/test01.html

a要素のブラウザ標準の機能は「リンク」ではないのですか?

triggerメソッドを利用してa要素をクリックするサンプルを作成したのですが、functionは実行されるものの、リンクの機能が実行されませんでした。サンプル(trigger/test02.html)を開いてbody内にa要素とbutton要素があることを確認してください。リンク先はyahooになっています。

<a href="http://www.yahoo.co.jp/" target="_blank">yahoo</a>
<button>CLICK</button>

jQueryでは以下の部分を先に確認してください。a要素がクリックされたらtextメソッドを利用してテキスト内容を「クリックされたよ」に変更します。実際にリンクをクリックすると、テキストを変更して別ウインドウでyahooのページを開きます。

$("body").on("click", "a", function(){
	$(this).text("クリックされたよ")	
});

続いてbutton要素の処理を設定した以下の部分を確認してください。triggerメソッドを利用してa要素をクリックします。

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

しかし実際にbuttonをクリックしても、a要素のリンクが実行されません。テキスト内容は「クリックされたよ」と変更されるので、functionは実行されています。何故なのでしょう?、a要素のブラウザ標準の機能はリンクではないのですか?

ググってみたら結構出てきました、要するにa要素の「リンク」はブラウザ標準の機能ではないようです。a要素自体にはリンクの設定はなくアンカーの設定で、リンクはhref属性によってオプション的に追加されるからなのでしょう(たぶん)。

検索した結果を参考に、リンクするサンプルを作成しましたが、正しいか確信は持てません...。
→サンプル(trigger/test02b.html

$("body").on("click", "a", function(){
	$(this).text("クリックされたよ");
	eo.preventDefault();ブラウザ標準のリンクは実行しない
	myURL = $("a").attr("href");//a要素からリンク先の情報(href)を取得
	window.open(myURL, "_blank");取得したリンク先を開く
});
$("button").click(function(){
	$("a").trigger("click");
});

v1.9での仕様変更

v1.9以前はtriggerメソッドでラジオボタンやチェックボックスをクリックした際、それらを直接クリックした際の動作と異なっていました。サンプル(trigger/test03.html)を開いてbody内にチェックボックスとbuttonがあることを確認してください。jQueryでは、まず以下の部分を確認して下さい。チェックボックスがクリックされるとチェックの状態をアラートで表示するようになっています。

$("input").click(function(){
	var myStatus = $("input").prop("checked");
	alert(myStatus);
})

ですので、チェックボックスをクリックしてチェックを入れるとtrue、もう一度クリックしてチェックを外すとfalseと表示されます。続いてbuttonをクリックした時の処理を確認します。jQueryは以下の様に記述され、triggerでチェックボックスをクリックしているだけです。

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

このサンプルでbuttonをクリックするとチェックボックスの現在の状態を表示してからクリック処理されます。つまりチェックが入っていない時にbuttonをクリックすると、現在の状態であるfalseを表示してからチェックが入ります。

しかしv1.9では、このややこしい仕様が変更されました。サンプル(trigger/test03b.html)を開いてjQueryのバージョン以外はtrigger/test03.htmlと同じ事を確認して下さい。

<script type="text/javascript" src="../../../css_js/jquery-1.9.0.min.js"></script>

このサンプルではbuttonをクリックしてもチェックボックスをクリックしたのと同じ結果になります。

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

triggerHandlerメソッドが複数の要素に対応していないのに対し、triggerメソッドは対応しています。
サンプル(trigger/test04.html)を開いてbody内にinput要素が3つあることを確認してください。

jQueryはtrigger/01.htmlと同じですが、このサンプルではセレクタのinputにマッチする要素が3つあります。

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

結果としてbuttonをクリックすると、3つのinput要素すべてに「フォーカスされたよ」と表示されます。 比較のためtriggerHandlerメソッドのサンプルも確認してください。
→サンプル(triggerHandler/test02.html