第6回 イベント編：連載：jQuery逆引きリファレンス（11/14 ページ）

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　triggerメソッドを利用することで、要素セットに関連付いたイベント・リスナを実行することができます。<event>()メソッドと似ているように思われるかもしれませんが、triggerメソッドでは、引数として任意のパラメータ値を渡せる点が異なります。

　具体的な例も見てみましょう。以下は、ボタンに関連付いたclickイベント・リスナを、<div>要素をダブルクリックしたタイミングで実行する例です。ただし、<div>要素をダブルクリックした場合には、あらかじめ指定したパラメータ値もイベント・リスナに引き渡すものとします。

<script type="text/javascript">

$(function() {

  // ボタン・クリック時にダイアログボックスを表示
  $('#btn').click(function(e, param) {
    window.alert('値：' + param);
  });

  // <div>要素をダブルクリックしたときに、
  // ボタン・クリックのイベントを発生
  $('#listen').dblclick(function() {
    $('#btn').trigger('click', ['WINGSプロジェクト']);
  });
});

</script>

  ……中略……

<form>
  <input type="button" id="btn" value="クリック！" />
  <div id="listen">ダブルクリックしてください</div>
</form>

リスト100 ボタンに関連付いたイベント・リスナを、<div>要素のダブルクリック時に実行（Trigger.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

リスト100の実行結果（1）
ボタン・クリック時は、パラメータは渡されない（undefinedが表示される）。

リスト100の実行結果（2）
<div>要素をダブルクリックした場合はtriggerメソッド経由でパラメータをセット。

　triggerメソッドの引数dataには配列リテラル（[……]）の形式でパラメータ値を指定します。そして、このパラメータ値を受け取っているのがリスト100の太字の部分です。このように、イベント・リスナの第2引数以降で取得できるのです。

　もしも複数のパラメータを渡したい場合には、次のように必要な数だけ引数を追加します。

$('#btn').click(function(e, param, param2, param3) {

イベント・リスナに複数のパラメータを渡す場合の記述例

　サンプルの結果を確認すると、直接ボタンをクリックした場合にはパラメータは渡されませんので、引数paramの値はundefined（未定義）であることが、<div>要素をダブルクリックした場合には、triggerメソッド経由でパラメータが渡されていることが、それぞれ確認できます。