.triggerHandler()【イベント実行 (ブラウザデフォルト処理なし)】
メモ
- イベントを実行 (ブラウザデフォルト処理なし)
※が付いた項目は、 .trigger()【イベント実行 (ブラウザデフォルト処理あり)】と相違- 以下のイベントを実行
.on()【イベントハンドラ設定】・.on()【イベントハンドラ設定】の省略形 で設定されたイベント (カスタムイベントを含む)
イベント名にプレフィックス "on" が付いたプロパティ (例:"onclick")
但し、ブラウザのデフォルト処理はなし※ (例:.focus()・.submit() )
(参照:.trigger()【イベント実行 (ブラウザデフォルト処理あり)】) - 処理の実行は設定順 (ユーザによるイベント発生と同様)
- 最初の該当要素のみに対して処理※ (戻り値は、Object)
- バブルアップの発生は無し※
- 以下のイベントを実行
- 追加パラメータ
- 情報を渡す為に、追加パラメータ使用 (標準イベントは、イベントデータ使用)
- Array【配列】・PlainObject【プレーンオブジェクト】として指定
単一のString【文字列】・Number【数値】も指定可能 1.6.2
構文
説明 | 構文 | 戻り値 |
---|---|---|
イベント実行 (ブラウザデフォルト処理なし) | .triggerHandler( eventType [, extraParameters ] ) 1.2 String eventType: イベント名 (.on()【イベントハンドラ設定】のイベント名 参照) Array | PlainObject extraParameters: 追加パラメータ ( 詳細は、上記メモ ) | Object 最後のハンドラの戻り値 (undefined:実行ハンドラ無し) |
.triggerHandler( event [, extraParameters ] ) 1.3 Event event:イベントオブジェクト Array | PlainObject extraParameters: 追加パラメータ ( 詳細は、上記メモ ) | Object 最後のハンドラの戻り値 (undefined:実行ハンドラ無し) |
関連
- jQuery リファレンス メモ
- jQuery (英語)
例
<style>
.classFocus { background-color:pink; } /*《フォーカス取得 (バブリングなし)》時クラス*/
</style>
<p><!--《クリック》イベント処理 (追加パラメータ:個別参照)-->
<button id="trigger11" type="button">[ trigger11 ]<br>funcClick1(eventObject, p1, p2)</button>
<button id="trigger12" type="button">[ trigger12 ]<br>.triggerHandler("click", Array)</button>
<button id="trigger13" type="button">[ trigger13 ]<br>.triggerHandler("click", String)</button>
<button id="trigger14" type="button">[ trigger14 ]<br>.triggerHandler("click", Number)</button>
</p>
<p><!--《クリック》イベント処理 (追加パラメータ:オブジェクト参照)-->
<button id="trigger21" type="button">[ trigger21 ]<br>funcClick2(eventObject, obj)</button>
<button id="trigger22" type="button">[ trigger22 ]<br>.triggerHandler("click", PlainObject)</button>
<button id="trigger23" type="button">[ trigger23 ]<br>.triggerHandler("click", Object)</button>
<button id="trigger24" type="button">[ trigger24 ]<br>.triggerHandler(EventObject, PlainObject)</button>
</p>
<p><!--onclick プロパティ・カスタムイベント-->
<button id="trigger31" type="button" onclick='$("#output1").text("onclick [trigger31]");'>[ trigger31 ]<br>onclick="~" / custom</button>
<button id="trigger32" type="button">[ trigger32 ]<br>.triggerHandler("click")</button>
<button id="trigger33" type="button">[ trigger33 ]<br>.triggerHandler("custom", Array)</button>
</p>
<p><!--標準イベント動作相違-->
<input id="trigger41" value="[ trigger41 ]">
<button id="trigger42" type="button">[ trigger42 ]<br>.trigger("focus")</button>
<button id="trigger42" type="button">[ trigger43 ]<br>.triggerHandler("focus")</button>
</p>
<p><!--出力領域-->
<span id="output1" style="border:1px black solid; padding:1px 5px; background-color:lightcyan;">【出力】</span>
</p>
<script>
// 《クリック》イベント処理 (追加パラメータ:個別参照)
function funcClick1(eventObject, p1, p2) {
$("#output1").text(eventObject.type + " [ " + this.id + " ] event.data = " + eventObject.data + " ( " + p1 + ", " + p2 + " )");
}
// 《クリック》イベント処理 (追加パラメータ:オブジェクト参照)
function funcClick2(eventObject, obj) {
var str = eventObject.type + " [ " + this.id + " ] event.data = " + eventObject.data;
if (obj !== undefined) {
str += " ( data1 = " + obj.data1 + ", data2 = " + obj.data2 + " )";
}
$("#output1").text(str);
}
// 《クリック》イベント処理
$("#trigger11").click("DATA11", funcClick1);
// 《クリック》イベント実行:追加パラメータ(配列) 指定
$("#trigger12").click(function() {
$("#trigger11").triggerHandler("click", [ "ArrayData1", "ArrayData2" ]);
});
// 《クリック》イベント実行:追加パラメータ(文字列) 指定
$("#trigger13").click(function() {
$("#trigger11").triggerHandler("click", "STRING");
});
// 《クリック》イベント実行:追加パラメータ(数値) 指定
$("#trigger14").click(function() {
$("#trigger11").triggerHandler("click", 123);
});
// 《クリック》イベント処理
$("#trigger21").click("DATA21", funcClick2);
// 《クリック》イベント実行:追加パラメータ(連想配列) 指定
$("#trigger22").click(function() {
$("#trigger21").triggerHandler("click", { data1:"ObjectData22-1", data2:"ObjectData22-2" });
});
// 《クリック》イベント実行:追加パラメータ(オブジェクト) 指定
$("#trigger23").click(function() {
var data = new Object();
data.data1 = 123;
data.data2 = "STRING";
$("#trigger21").triggerHandler("click", data);
});
// 《クリック》イベント実行:イベントオブジェクト・追加パラメータ(連想配列) 指定
$("#trigger24").click(function() {
var eventObj = new jQuery.Event("click");
$("#trigger21").triggerHandler(eventObj, { data1:"ObjectData24-1", data2:"ObjectData24-2" });
});
// カスタムイベント処理
$("#trigger31").on("custom", function(eventObject, p1, p2) {
$("#output1").text("custom [ " + this.id + " ] ( " + p1 + ", " + p2 + " )");
});
// 《クリック》イベント実行
$("#trigger32").click(function() {
$("#trigger31").triggerHandler("click");
});
// カスタムイベント実行
$("#trigger33").click(function() {
$("#trigger31").triggerHandler("custom", [ "custom1", "custom2" ]);
});
// 《フォーカス取得 (バブリングなし)》イベント処理
$("#trigger41").focus(function() {
$("#trigger41").addClass("classFocus");
});
// 《フォーカス喪失 (バブリングなし)》イベント処理
$("#trigger41").blur(function() {
$("#trigger41").removeClass("classFocus");
});
// 《フォーカス取得 (バブリングなし)》イベント実行 (処理あり)
$("#trigger42").click(function() {
$("#trigger41").trigger("focus");
});
// 《フォーカス取得 (バブリングなし)》イベント実行 (処理なし)
$("#trigger43").click(function() {
$("#trigger41").triggerHandler("focus");
});
</script>
【出力】