【jQuery】trigger()で強制的に要素のイベントを発生させる

こんにちは、Ryohei（@ityryohei）です！

本記事では、jQueryのtrigger()メソッドで要素のイベントを強制的に発生させる方法をご紹介しています。

trigger()メソッドは、スクリプト側から要素のイベントを発生させる際にとても役立つメソッドです。この後にあの要素のイベントを発生させたいな、という状況になった場合に活用していただければと思います。

では、解説していきます。

trigger()とは

trigger()は、セレクタの要素に指定したイベントを発生させるjQueryのメソッドです。

ある要素をクリックしたときに発生するイベントを、実際にクリックすることなくスクリプト側から発生させたい、というときに有効です。

使い方は他のメソッドと同様です。セレクタにtrigger()を指定し、引数にイベントを指定します。

$(selector).trigger('event');

イベントには、on()などで指定するイベント、例えばclickやchangeを指定することができます。

また、trigger()は引数に配列を指定してイベントに値を渡すことができます。

$(selector).trigger('event', [value1, value2...]);

trigger()を使用して要素のイベントを発生させてみます。

2つのボタン要素を用意し、それぞれにクリックイベントを設定します。「Button2」がクリックされたときに「Button1」のクリックイベントを発生させます。

<div id="app">
    <button type="button" class="btn1">Button1</button>
    <button type="button" class="btn2">Button2</button>
</div>

$('.btn1').on('click', function(){
   alert('Button1がクリックされました！'); 
});

$('.btn2').on('click', function(){
    $('.btn1').trigger('click');
});

下記はデモになります。「Button2」をクリックして挙動を確認してみてください。

trigger()はスクリプトから強制的に要素のイベントを発生させることができる便利なメソッドです。複数のイベントが設置されたページで「これがクリックされたときにあれを実行したい！」を解消してくれますので、ぜひ使ってみてくださいね。

以上、jQueryのtrigger()で強制的に要素のイベントを発生させる方法のご紹介でした！

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

Follow @itpryohei