.triggerHandler()【イベント実行 (ブラウザデフォルト処理なし)】

メモ

構文

説明構文戻り値
イベント実行
(ブラウザデフォルト処理なし)
.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:実行ハンドラ無し)

関連

<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>

【出力】