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

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

1. trigger メソッド

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

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

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

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

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

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

.trigger( eventType [, extraParameters ] )

.trigger( event )

▲目次へ戻る

2. trigger メソッドの使い方

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

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

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

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

<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(“値”) 」として数値型に変換してカウントアップを行っています。

▲目次へ戻る

3. まとめ

jQueryのtrigger メソッドについて、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る