ITコラム

mv11955

jQuery

2018.09.21

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

▲目次へ戻る

3. まとめ

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

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

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

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

▲目次へ戻る

卒業生の声

SHARE

最新記事

無料相談する

INTERNOUS,inc. All rights reserved.