column

ITコラム

mv11955

プログラミングノウハウ

2018.09.21

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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

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() {

  let val1 = 0;
  let 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.

無料オンライン説明会へ