デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.which正規化されたキーコードの取得

構文

正規化されたキーコードの取得返値:数値
イベントオブジェクト.whichver1.1.3〜

機能

イベントオブジェクトのwhichプロパティを利用すると正規化されたキーコードを取得できます(正規化とはブラウザ間などの環境の差をなくして利用しやすくすること)。

また押されたマウスボタンにも対応し、右ボタンクリックの判定もできます。

解説

正規化されたキーコードを取得します

サンプル(which/01.html)を開いてbody内にp要素が1つあることを確認してください。jQueryは以下の様に記述され、keydownメソッドを利用してブラウザ上(document)でキーが押されたらwhichプロパティを利用してキーコードを取得します。キーコードはappendメソッドを利用してp要素に追加していきます。

$(document).keydown(function(eo){
	$("p").append(eo.which + " ");
});

結果として、何かキーを押すとキーコードがp要素に追加されていきます。

マウスボタンのコードも取得できます

whichプロパティはmousedownメソッドで利用することで、押されたマウスボタンのコードを取得することが出来ます。 サンプル(which/02.html)を開いてbody内の構成がwhich/01.htmlと同じことを確認してください。jQueryもほとんど同じで、異なるのは以下の様にイベントがmousedownに変更された点だけです。

$(document).mousedown(function(eo){
	$("p").append(eo.which + " ");
});

結果として、ページ上でマウスボタンを押すとコードがp要素に追加されていきます。
私の利用しているマウスでは左ボタンが「1」右ボタンが「3」でした。中央のボタンはmacのexposeに機能を割り当てているためか、取得することはできませんでした(たぶんmousedownイベント自体が発生していない)。

メモ

jQueryのイベントオブジェクトにはjavaScriptがもつ「keyCodeプロパティ」も利用できるのですが、利用しているPC(Mac)などの環境により違いがある場合があるので、正規化したwhichプロパティを利用した方が良さそうです。一応javaScriptの「keyCodeプロパティ」を利用したサンプルも紹介します。
→サンプル(which/test01.html

$(document).keydown(function(eo){
	$("p").append(eo.keyCode + " ");
});

javaScriptのkeyCodeプロパティもイベントオブジェクト(上記ではeo)経由で取得できます。
jQuery.Eventのメモの2番目を参照してください。