jQuery【 trigger 】手動でイベントを発生させる trigger メソッド

colmun_main11955

jQuery の trigger メソッドは、手動でイベントを発生させるメソッドです。
今回は、jQuery の trigger メソッドの使用方法について紹介します。

目次

 
1.trigger メソッド
2.trigger メソッドの使い方

1.trigger メソッド

 
trigger メソッドは、手動でイベントを発生させるメソッドです。

例えば、HTML 要素をクリックした際に発生するイベントとして click イベントがありますが、trigger メソッドを使用すると この click イベントを任意に発生させることができます。

trigger メソッドは、引数によって 2 通りの記述方法があります。

$(セレクタ).trigger( eventType [, extraParameters ] );

$(セレクタ).trigger( event );

trigger メソッドの引数の内容は、それぞれ以下の通りです。

.trigger( eventType [, extraParameters ] )

eventType
javaScriptイベントの文字列を指定
(”click”、”submit” 等)

[extraParameters]
イベントハンドラに渡したいデータを指定

.trigger( event )

event
jQueryのEventオブジェクトを指定

▲目次へ戻る

 

2.trigger メソッドの使い方

 
trigger メソッドを使用して、クリックイベントを発生させます。

次のサンプルは、「 triggerあり 」ボタンをクリックした際に「 triggerなし 」ボタンのクリックイベントも発生するサンプルです。

各ボタンをクリックしてみて下さい。
( リセットボタンをクリックすると カウントがリセットされます。)

 
 
「 triggerなし 」ボタンのクリックイベントが 0 回 発生!
「 triggerあり 」ボタンのクリックイベントが 0 回 発生!

 
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {

  var val1 = 0;
  var val2 = 0;

  // 「 triggerなし 」ボタンのクリックイベント
  $("#btn1").click(function () {
    $("#spn1").text(parseInt(val1 + 1));
    val1++;
  });

  // 「 triggerあり 」ボタンのクリックイベント
  $("#btn2").click(function () {

    // 「 triggerなし 」ボタンのクリックイベントを発生させる
    $("#btn1").trigger("click");

    $("#spn2").text(parseInt(val2 + 1));
    val2++;
  });

  $("#btn3").click(function () {
    val1 = 0;
    val2 = 0;
    $("#spn1").text(val1);
    $("#spn2").text(val2);
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:20px;">
  <div style="display:inline-flex; align-items:center;">
    <input type="button" id="btn1" value="triggerなし"> 
    <input type="button" id="btn2" value="triggerあり"> 
    <input type="button" id="btn3" value="リセット">
  </div>
  <div>「 triggerなし 」ボタンのクリックイベントが <span id="spn1">0</span> 回 発生!</div>
  <div>「 triggerあり 」ボタンのクリックイベントが <span id="spn2">0</span> 回 発生!</div>
</div>

ボタンのクリックイベント同士で分かり辛いかもしれませんが、「 triggerあり 」ボタンをクリックした際に、「 triggerあり 」ボタン自体のクリックイベントと共に「 triggerなし 」ボタンのクリックイベントも発生させて 「 triggerなし 」ボタンをクリックしたのと同じ処理を行っています。

画面から受け取る値は 文字型として認識されるため、「 parseInt(“値”) 」として数値型に変換してカウントアップを行っています。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です