【jQuery】trigger()メソッド完全ガイド｜カスタムイベント・triggerHandler()との違い・実用パターンまで

trigger() はjQueryの要素に紐付いたイベントハンドラーをプログラムから強制的に呼び出すメソッドです。「ページ読み込み時にchangeイベントを1回走らせて初期状態を同期する」「テスト中にクリックイベントを自動発火させる」など、実務でよく使われます。

基本構文とよく使うイベントのトリガー

$("セレクター").trigger("イベント名") で対象要素のイベントを発火させます。クリック・フォーカス・changeなど、標準イベントはすべて発火できます。

// クリックイベントを強制発火
$('#submit-btn').trigger('click');

// 省略形（.click()/.change() もtrigger()と同義）
$('#submit-btn').click();   // trigger('click') と同じ

// changeイベントを発火（セレクトボックスの選択変更処理を再実行）
$('#category').trigger('change');

// フォーカスを当てる
$('#search-input').trigger('focus');

// keyupイベントを発火
$('#filter-input').trigger('keyup');

trigger()とtriggerHandler()の違い

triggerHandler() は trigger() と似ていますが、バブリングしない・ブラウザのデフォルト動作を発生させない・最初の要素のみ対象という3つの違いがあります。

// trigger() の例: バブリングあり・全要素対象
$('input[type="text"]').trigger('focus');
// → 全てのテキスト入力にfocusイベントが発火し、
//   ブラウザのフォーカス枠も表示される

// triggerHandler() の例: バブリングなし・最初の要素のみ
$('input[type="text"]').triggerHandler('focus');
// → 最初のinputのfocusハンドラーだけ実行
//   ブラウザのフォーカス枠は表示されない

// 典型的な使い分け
// trigger('change')  → changeハンドラー + ブラウザ動作を両方発火させたい場合
// triggerHandler('change') → ハンドラーだけ呼びたい（フォーム送信などを避けたい）場合

カスタムイベントの定義とtrigger()で発火させる

独自のイベント名を on() で定義し、trigger() で呼び出すことでコンポーネント間の疎結合な通信が実現できます。

// カスタムイベントを定義
$(document).on('cart:updated', function (e, itemCount) {
  // カートが更新されたときの処理
  $('#cart-count').text(itemCount);
  $('#cart-icon').addClass('is-updated');
});

// 商品追加処理（どこからでも発火できる）
$('#add-to-cart').on('click', function () {
  var newCount = 5;  // 実際はDBやAPIから取得
  $(document).trigger('cart:updated', [newCount]);
});

// 名前空間付きカスタムイベント（推奨）
// 'cart:updated' のようにコロンで名前空間を区切ると
// イベント名の衝突を防げる

イベントハンドラーにパラメーターを渡す

trigger("イベント名", [値1, 値2, ...]) の第2引数に配列を渡すと、イベントハンドラーの第2引数以降に値が渡されます。

// パラメーターを受け取るハンドラー
$('#my-elem').on('dataLoaded', function (e, data, source) {
  console.log('data:', data);     // { id: 1, name: 'foo' }
  console.log('source:', source); // 'api'
});

// パラメーターを渡してtrigger
$('#my-elem').trigger('dataLoaded', [{ id: 1, name: 'foo' }, 'api']);

// Eventオブジェクトを経由してデータを渡す方法
var ev = $.Event('dataLoaded');
ev.detail = { id: 1, name: 'foo' };
$('#my-elem').trigger(ev);
// ハンドラー内: e.detail.id でアクセス

バブリング制御との組み合わせ

trigger()で発火したイベントも通常のイベントと同様に親要素へバブリングします。意図しない親要素のハンドラーが呼ばれる場合は stopPropagation() と組み合わせます。

// バブリングを確認する例
$(document).on('click', function () {
  console.log('document clickハンドラーが呼ばれた');
});

$('#btn').on('click', function () {
  console.log('#btn clickハンドラーが呼ばれた');
});

// trigger('click') はバブリングするため両方が呼ばれる
$('#btn').trigger('click');
// ログ: '#btn clickハンドラーが呼ばれた'
// ログ: 'document clickハンドラーが呼ばれた'

// triggerHandler('click') はバブリングしないため#btnのみ
$('#btn').triggerHandler('click');
// ログ: '#btn clickハンドラーが呼ばれた'（のみ）

実用パターン集

読み込み時に初期状態を同期する

changeイベントに状態同期のロジックを書いておき、ページ読み込み時に trigger("change") を呼ぶだけで初期化できます。

$(function () {
  // カテゴリ変更時の処理（フォーム操作時と読み込み時の両方で使う）
  $('#category').on('change', function () {
    var selected = $(this).val();
    if (selected === 'other') {
      $('#other-field').show();
    } else {
      $('#other-field').hide();
    }
  });

  // 読み込み時にtriggerで初期化（コードの重複なし）
  $('#category').trigger('change');
});

タブUIで他のタブ切り替えに連動する

$(function () {
  // タブ切り替えカスタムイベント
  $(document).on('tab:changed', function (e, tabId) {
    // グラフやデータの更新など複数コンポーネントが反応
    console.log('タブが切り替わりました:', tabId);
    updateChart(tabId);
    loadTabData(tabId);
  });

  $('.tab-btn').on('click', function () {
    var tabId = $(this).data('tab');
    $('.tab-btn').removeClass('is-active');
    $(this).addClass('is-active');
    $(document).trigger('tab:changed', [tabId]);
  });
});

フォーム送信前のバリデーション再実行

$(function () {
  // 各フィールドにblurバリデーションを設定
  $('input[required]').on('blur', function () {
    if (!$(this).val()) {
      $(this).addClass('is-error');
    } else {
      $(this).removeClass('is-error');
    }
  });

  // 送信時に全フィールドのblurを強制発火してバリデーション
  $('form').on('submit', function (e) {
    $('input[required]').trigger('blur');  // 全フィールドをまとめてバリデーション

    if ($('.is-error').length > 0) {
      e.preventDefault();  // エラーがあれば送信阻止
    }
  });
});

テスト・デバッグでの活用

ブラウザコンソールや自動テストから trigger() を使ってUIの動作確認やデバッグができます。

// ブラウザコンソールから実行する例
$('#upload-input').trigger('change');   // ファイル選択後の処理を再実行
$(window).trigger('resize');           // リサイズイベントを手動発火
$(window).trigger('scroll');           // スクロールイベントを手動発火

// jQuery QUnit / Jasmine などのテストでの使用例
// QUnit
QUnit.test('submitボタンクリックでフォームが送信される', function (assert) {
  var submitted = false;
  $('#my-form').on('submit', function (e) {
    e.preventDefault();
    submitted = true;
  });
  $('#submit-btn').trigger('click');
  assert.ok(submitted, 'フォームが送信された');
});

trigger()・triggerHandler()・dispatchEvent()の比較

まとめ

trigger() は「ハンドラーを再利用して重複コードを避ける」「カスタムイベントでコンポーネントを疎結合にする」「テスト・デバッグでUIの動作を確認する」など、実務で幅広く活用できます。triggerHandler() との違いを押さえることが、バグのない実装への近道です。

関連記事: ページ読み込み時のチェックボックス初期化完全ガイド / フォームバリデーション完全ガイド / each()でループする完全ガイド

よくある質問（FAQ）