JavaScriptのtriggerメソッドを使って任意のタイミングでイベントを実行する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのtriggerメソッドを使って任意のタイミングでイベントを実行する方法について解説しています。triggerメソッドによるイベント処理の設定方法の例、triggerHandlerメソッドとの違いを説明します。サンプルで動作を確認してみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのtriggerメソッドを使って任意のタイミングでイベントを実行する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

triggerメソッドを使って任意のタイミングでイベントを実行する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

triggerメソッドとは

jQueryで扱えるメソッドで、任意のタイミングでイベント処理を実行させることができる様になります。例えば、イメージの上にマウスが来た時に、クリックしたのと同じ動きをさせたり出来ます。

その他にも、他の処理を実施した後に、クリックしたイベントを行う。などにも活用できるのです。

 

triggerメソッドの使い方

早速、例を見てみましょう。

<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <img src="img/001.jpg"/>
    <script>
      $('img').on('mouseenter', function() {
      //ここで、「trigger」を利用して「クリックイベント」を呼び出します
      $(this).trigger('click');
    })
    </script>
  </body>

この様に「要素.trigger( イベント名 )」と記載する事で利用できます。この例では、画像上にマウスを持っていくとクリックしたイベントを実行します。

また、「要素.trigger( イベント名 , [配列データ])」で、第二引数に値(配列データ)を渡すこともできます。

<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <img src="img/001.jpg"/>
    <script>
      $('img').on('mouseenter', function() {
        $(this).trigger('click',["002.jpg"]);
      })
      $('img').click( function(e, data) {
        window.open("img/"+data, "imgwindow", "width=866,height=580");
      })
    </script>
  </body>

ここでは、イメージファイル名を渡しています。これにより任意のファイルをオープンする事も可能です。渡すデータは配列である事に注意して下さい。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

任意のタイミングでイベントを実行する方法

このほかにも、任意の関数内で任意のタイミングで呼び出しを行う事も出来ます。また、オリジナルのイベントを作成(カスタムイベント)して、それを呼び出すことも可能となります

<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <select name="ken">
      <option value="tokyo">東京</option>
      <option value="oosaka">大阪</option>
      <option value="fukuoka">福岡</option>
    </select>
    <p></p>
    <script>
      //オリジナルのイベント
      $(document).on('originalevent', function(e, data) {
        $('p').text(data);
      })
      $('select').change(function() {
        //val値をfood関数に引き渡す
        food($(this).val());
      });
      //選択に合わせた食べ物
      function food(val){
        if(val == "tokyo") {
          $(document).trigger('originalevent',["東京バナナ"]);
        } else if (val == "oosaka") {
          $(document).trigger('originalevent',["たこ焼き"]);
        } else {
          $(document).trigger('originalevent',["とんこつラーメン"]);
        }
      }
    </script>
  </body>

この様に、関数の中で実行するなど、好きなタイミングで呼び出しが可能となります。

 

triggerメソッドとtriggerHandlerメソッドの違い

「triggerメソッド」にたもので「triggerHandlerメソッド」と言うのもあります。

似たように動きをするのですが、下記の点で違う動きをするので、注意が必要となります。

  • 「triggerHandlerメソッド」は、ブラウザ標準のイベント動作を実行しない
  • 「triggerHandlerメソッド」は、一回しかイベント動作を実行しない

と言う点が違います。例で確認してみましょう

<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <input type="checkbox">
    <input type="checkbox">
    <button>クリック</button>
    <script>
      $('button').mouseenter(function() {
        $('input').triggerHandler('click',["triggerHandler"]);
      })
      $('button').click(function() {
        $('input').trigger('click',["trigger"]);
      })
      $('input').click( function(e, data) {
        console.log( data + 'で実行');
      })
    </script>
  </body>

これを実行すると、ボタンの上にマウスを置くと「triggerHandler」を利用してチェックボックスのクリックが実行されます。しかし、『「triggerHandlerメソッド」はブラウザ標準のイベント動作を実行しない。』とある様に、チェックは入りません。また、実行される回数も1回でコンソールログには1件のみメッセージとなります。

次にボタンをクリックすると「trigger」を利用してチェックボックスのクリックが実行されます。此方は、通常にクリックした動きと同じになるので、チェックが入り2回実行もされます。

この様に、少しですが大きな違いがありますので、利用時には注意して下さい。

 

監修してくれたメンター

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。