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

... PV

スポンサードリンク

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になっていました。

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

Written by F.Ko-Ji

地図とツイッターを同時に見れるiPhoneアプリ「MapAnd」をリリースしました！

トラックバック

このエントリーのトラックバックURL:

Javascript / プログラミング

English version

2007/05/04 08:06:03 by F.Ko-Ji
パーマリンクコメント (0) トラックバック (0) Javascript

前のエントリー: « COOLPIX S50cで利用できる3つのサービスについて
次のエントリー: 今年から4月29日は「昭和の日」、5月4日は「みどりの日」だった »

コピペにご利用ください。

タイトル:

URL:

リンク用HTMLタグ:

プロフィール

F.Ko-Ji といいます。ネットサービスを作ったりブログ書いたりしてます。Webエンジニア寄りのネットサービス・クリエイターです。

最近はドットインストールの開発を担当してます。個人では DailyFeed や梅酒.in や Meity などを運営してます。梅酒が好きです。ブログにはネットサービスの開発に役立ちそうな話題を中心に、自分のアンテナにひっかかったものを書いてます。

マイコミジャーナルで「Useful Web Applications」という連載も執筆しました。