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 関連エントリーリストジェネレータ