jQuery の trigger メソッドは、手動でイベントを発生させるメソッドです。
今回は、jQuery の trigger メソッドの使用方法について解説いたします。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
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オブジェクトを指定 |
trigger メソッドを使用して、クリックイベントを発生させます。
次のサンプルは、「 triggerあり 」ボタンをクリックした際に「 triggerなし 」ボタンのクリックイベントも発生するサンプルです。
各ボタンをクリックしてみて下さい。
( リセットボタンをクリックすると カウントがリセットされます。)
上のサンプルのソースコードは次の通りです。
<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(“値”) 」として数値型に変換してカウントアップを行っています。
jQueryのtrigger メソッドについて、いかがでしたでしょうか。
「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。
今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。
INTERNOUS,inc. All rights reserved.