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

こんにちは、ryohei(@ityryohei)です!

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

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

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

trigger()とは

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

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

trigger()の使い方

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

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

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

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

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

trigger()でイベントを発生させてみる

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

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

HTML

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

JS

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

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

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

DEMO

See the Pen
trigger() | jQuery
by ryohei (@intotheprogram)
on CodePen.

最後に

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

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

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍