連載
» 2010年04月23日 00時00分 公開

連載:jQuery逆引きリファレンス:第6回 イベント編 (11/14)

[山田祥寛(http://www.wings.msn.to/),著]



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 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メソッド経由でパラメータが渡されていることが、それぞれ確認できます。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。