F.Ko-Jiの「一秒後は未来」

Yahoo! UI Libraryでキーボードイベントを扱う方法

Yahoo! UI Library のリファレンスを見てもキーボードイベントを取り扱う方法がいまいち分かりにくかったので、以下に簡単なサンプルを掲載しておきます。少々理解できていない部分があるので必要最小限の情報です。

必要なライブラリ

イベントを扱うだけであれば、yahoo-min.jsとevent-min.jsをインクルードしておけばいいです。ライブラリはYahoo!がホスティングしてくれます。

<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo/yahoo-min.js" ></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/event/event-min.js" ></script>

YAHOO.util.KeyListner

Yahoo! UI Library でキーイベントを扱うには、YAHOO.util.KeyListnerを利用します。

var yKey = new YAHOO.util.KeyListener(document, {keys: [38, 40]}, {fn: handler});
yKey.enable();

引数は以下の通り。

  • 第1引数: イベントを割り当てるエレメント。DOMもしくはIDで与える。
  • 第2引数: イベント対象のキーコード。keysに配列でキーコードを与える。Shiftキー、Altキー、Ctrlキーを利用したいときは、 {keys: […], shift: true, alt: true, ctrl: true} のようにbooleanで指定することができる。
  • 第3引数: コールバック関数。たいていのサンプルでは fn に関数オブジェクトを与えていた。詳細はのちほど。
  • 第4引数: keydown または keyup を任意で与える。指定しない場合は keydown

上の例にあるように、オブジェクトを生成したら enable() メソッドでキーイベントを有効にする必要がある。

コールバック関数

YAHOO.util.KeyListener の第3引数のコールバック関数についてです。

var handler = function(type, args, obj) {
    var keycode = args[0];
    // 38 ↑
    // 40 ↓
    if (keycode == 38) {
        exampleFunctionUp();
    }
    else if (keycode == 40) {
        exampleFunctionDown();
    }
}

調べてみると、コールバック関数の引数は3つ。上記の例の場合には、第1引数typeは keyPressed という文字列、第2引数argsは配列で最初の要素にキーコードが格納されています。第3引数はnullになっていました。

キーコードで処理を分岐させたいなら、上記のサンプルで事足りると思います。あとは詳しい人に聞いてください。

【関連エントリー】
Yahoo! UI LibraryのGraded Browser Supportという考え方 – F.Ko-Jiの「一秒後は未来」 はてなブックマーク数
Yahoo! UI Libraryでページ内スクロール – F.Ko-Jiの「一秒後は未来」 はてなブックマーク数
generated by 関連エントリーリストジェネレータ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

著者について

fkoji

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity電車遅延なう梅酒.in#グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など