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

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

連載目次

　bindメソッドは、要素セットのイベントeventに対応するイベント・リスナfncを定義します。<event>(fnc)メソッドでもほぼ同様の処理ができますが、異なる点もあります。それは、bindメソッドではイベント・リスナに対して、任意のパラメータdataを引き渡すことができるという点です。

　具体的な例を見てみましょう。以下は、<p>タグをクリックしたタイミングで、メッセージをダイアログ表示する例です。この際、表示するメッセージをbindメソッドの引数data経由で引き渡しています。

<script type="text/javascript">

$(function() {

  // <p>要素をクリックしたときのイベント・リスナを定義
  $('p').bind('click', { msg: 'クリックされました。' },
    function(e) {
      window.alert(e.data.msg);
    }
  );
});

</script>

  ……中略……

<p>クリックしてください。</p>

リスト094 <p>タグをクリックしたタイミングでメッセージ表示（Bind.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

リスト094の実行結果

　引数dataはオブジェクト・リテラルの形式で渡すことができます。また、引数dataで指定されたパラメータ情報には、イベント・リスナに渡されたeventオブジェクト（上記リスト094では引数e）を経由して、dataプロパティにアクセスすることで取得できます（太字部分）。

　なお、eventオブジェクトからアクセスできるメンバには、dataプロパティのほかにも、以下のようなものがあります。

メンバ	概要
isDefaultPrevented()	preventDefaultメソッドが呼び出されたか
isPropagationStopped()	stopPropagationメソッドが呼び出されたか
pageX	マウス・ポインタのX座標
pageY	マウス・ポインタのY座標
preventDefault()	イベント本来の動作をキャンセル
result	イベント・リスナによって返された最後の値
stopPropagation()	イベント・バブリングを停止
target	イベント発生元の要素
timeStamp	イベントが発生した時刻（タイムスタンプ値）
type	イベントの種類
which	キー／ボタンの種類（キー・コード、または文字コード）
eventオブジェクトの主なメンバ

　例えば、イベントのデフォルトの動作をキャンセルしたいという場合には、イベント・リスナの中でpreventDefaultメソッドを呼び出せばよいですし、以降のイベント・バブリングをキャンセルしたい場合にはstopPropagationメソッドを呼び出します。ちなみに、イベント動作、バブリングともにキャンセルしたい場合には、イベント・リスナの戻り値としてfalseを返すようにしてください。