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

特定の要素セットに対して、イベント・リスナを設定したり、指定したイベントを実行したりするためのメソッドをまとめた、すぐに役立つ13本を一挙公開。

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

連載目次

　triggerHandlerメソッドを利用することで、要素セットに関連付いたイベント・リスナを実行できます。引数dataを利用することで、イベント・リスナにパラメータ値も渡せるという意味では、triggerメソッドにもよく似ていますが、triggerメソッドがイベント・リスナと、ブラウザのデフォルトのイベント動作を行うのに対して、triggerHandlerメソッドはイベント・リスナのみを実行する点が異なります。

　具体的な例も見てみましょう。以下は、テキストボックスに関連付いたfocusイベント・リスナを、ボタンをクリックしたタイミングで実行する例です。ただし、［trigger］ボタンではtriggerメソッドで、［triggerHandler］ボタンではtriggerHandlerメソッドで、それぞれイベントを発生させます。両者の挙動の違いに着目してください。

<script type="text/javascript">

$(function() {
  $('#txt').focus(function() {
    $(this).css('background-color', 'Lime');
  });

  // triggerメソッドでイベント発生
  $('#btnTrigger').click(function() {
    $('#txt').trigger('focus');
  });

  // triggerHandlerメソッドでイベント発生
  $('#btnHandler').click(function() {
    $('#txt').triggerHandler('focus');
  });
});
</script>

  ……中略……

<form>
  <input type="text" id="txt" value="権兵衛" />
  <input type="button" id="btnTrigger" value="trigger" />
  <input type="button" id="btnHandler" value="triggerHandler" />
</form>

リスト101 テキストボックスに関連付いたイベント・リスナを、ボタン・クリック時に実行（TriggerHandler.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

リスト101の実行結果（1）
［trigger］ボタン・クリック時の結果。

リスト101の実行結果（2）
［triggerHandler］ボタン・クリック時の結果。

　図では分かりにくいかもしれませんが、［triggerHandler］ボタンをクリックした場合はテキストボックスの背景色がライムに変化しているだけであるのに対して、［trigger］ボタンをクリックした場合にはライムに変化し、かつ、テキストボックスにフォーカスが移動していることが確認できるはずです。これが、ブラウザ標準のイベント動作を行うかどうかの違いです。