第6回 イベント編：連載：jQuery逆引きリファレンス（5/14 ページ）
特定の要素セットに対して、イベント・リスナを設定したり、指定したイベントを実行したりするためのメソッドをまとめた、すぐに役立つ13本を一挙公開。
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>
このHTMLを実際にブラウザで開く
引数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を返すようにしてください。
Copyright© Digital Advantage Corp. All Rights Reserved.