triggerメソッド

triggerメソッドは、指定されたタイプのイベントに対して要素にバインドされたすべてのイベントハンドラを起動することができます。これは、ユーザーが操作した場合と同じ順序でハンドラ関数を呼び出します。 イベントハンドラを呼び出したいが、ブラウザのデフォルト動作を実行したくない場合は、triggerHandlerメソッドを使用してください。

構文

第一引数として、文字列でイベントタイプを渡すことができます。第二引数（任意）として、ハンドラに渡す追加パラメータを含む配列またはオブジェクトを指定できます：

javascript$(セレクタ).trigger(イベントタイプ, [追加パラメータ]);

第一引数として、jQuery.Eventオブジェクトの形でイベントを渡すこともできます：

javascript$(セレクタ).trigger(イベント, [追加パラメータ]);

追加パラメータをtriggerメソッドに渡す場合と、データをonメソッドに渡す場合には違いがあります。前者の場合、データはイベント実行時に定義されている必要がありますが、後者の場合はハンドラ関数をバインドする時点で定義されています。

例

ボタン#firstをクリックすると、最初のスパンの値だけが増加します。ボタン#secondをクリックすると、両方のスパンで値が増加しますが、この時、最初のボタンに対してユーザークリックをシミュレートします。関数increaseは、パラメータとして渡された数値を1増やします。triggerメソッドを使用することで、ボタン#secondを押しているにもかかわらず、最初のスパンのクリックイベントも発生させることができます：

html<button id="first">button1</button>
<button id="second">button2</button>
<div><span>0</span></div>
<div><span>0</span></div>

cssbutton {
  margin: 10px;
}

div {
  margin-left: 10px;
  font-weight: bold;
}

span {
  color: green;
}

javascript$('#first').click(function() {
  increase($('span').first());
});

$('#second').click(function() {
  $('#first').trigger('click');
  increase($('span').last());
});

function increase(str) {
  let num = parseInt(str.text(), 10);
  num.text(num + 1);
}

関連項目