JavaScriptのtriggerメソッドを使って任意のタイミングでイベントを実行する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptのtriggerメソッドを使って任意のタイミングでイベントを実行する方法について解説しています。triggerメソッドによるイベント処理の設定方法の例、triggerHandlerメソッドとの違いを説明します。サンプルで動作を確認してみましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,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>
ここでは、イメージファイル名を渡しています。これにより任意のファイルをオープンする事も可能です。渡すデータは配列である事に注意して下さい。
任意のタイミングでイベントを実行する方法
このほかにも、任意の関数内で任意のタイミングで呼び出しを行う事も出来ます。また、オリジナルのイベントを作成（カスタムイベント）して、それを呼び出すことも可能となります
<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」を利用してチェックボックスのクリックが実行されます。此方は、通常にクリックした動きと同じになるので、チェックが入り２回実行もされます。
この様に、少しですが大きな違いがありますので、利用時には注意して下さい。
監修してくれたメンター
| 小宮山晃史（こみやまこうじ)
現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
