Yahoo! UI Library3（YUI3）のコア機能（ノード・イベント）

Yahoo! UI Library Ver.3 を使ってみよう（2）

イベント（割り込み処理）

　イベント処理はユーザーとの対話的な処理には必要なものです。また、現在のJavaScriptでの開発の主体となっています。

　イベント処理を利用するには、イベント処理のモジュールを指定するのではなく、イベントが起こった後に行いたい処理のモジュールを設定してプログラムを作成します。イベント処理はどのモジュールにも含まれていると考えてよいでしょう。

イベント処理の書き方

　イベント処理は、.on()で設定します。最初の引数で、どのようなイベントで起動するかの指定を行い、次にどのような処理をさせるかを指定します。以下構文です。

［構文］イベント処理の設定

要素のインスタンス.on(イベント名,処理関数)

　要素のインスタンスは前項で説明した、one()、all()を使用して取得します。リスト6をみてください。

［リスト6］イベント処理1（event6.html）

<script type="text/javascript">
window.onload = function() {
    YUI().use('node', function(Y) {
        Y.one('#demo').on('click',function(e){    //（1）
            alert('クリックされました！');
        });
    });
}
</script>
</head>
<body>
<div id="demo">クリックしてください！</div>
</body>

　今回クリックイベントを使いました。Y.one('#demo')でインスタンスを取得して、on()で処理を記述しています。

　.on()の処理関数function(e)の引数eはイベントが発生した要素を処理関数に渡します。

　YUI3には、新しくY.on()の書き方が追加されています。リスト6を書き直してみました。

［リスト7］イベント処理2（event7.html）

<script type="text/javascript">
window.onload = function() {
    YUI().use('node', function(Y) {
        Y.on('click',function(e){        //（1）
            alert('クリックされました！');
        },'#demo');
    });
}
</script>
</head>
<body>
<div id="demo">クリックしてください！</div>
</body>

　要素のインスタンスを取得して.on()を指定するのではなく、（1）のように、Y.on()の3番目の引数にセレクタを指定します。すっきりした形になったと思います。なお、要素のインスタンス.on()で3番目の引数を指定しても無視されるようです。

　リスト4で使用したクリックイベント処理は、Y.on()の書き方で書いています。function(e)の引数eで要素のポインターを受け取り、 e.targetで要素を指定しています。

サポートされているイベントの種類

　イベント処理が書けるようになりました。YUI3でサポートされているイベントにはどんなものがあるのでしょうか？

　キーイベント処理には以下のイベント名が用意されています。

キーイベント

イベント名	説明
keyup	キーを離したとき
keydown	キーが押されたとき
keypress	文字が入力されたとき

　マウス操作のイベントです。

マウスイベント

イベント名	説明
click	クリックしたとき
dblclick	ダブルクリックしたとき
mousedown	押し下げたとき
mouseup	マウスのクリックを止めたとき
mouseover	マウスを重ねたとき
mouseout	ターゲットから外れたとき
mousemove	マウスを動かしたとき

　上記以外のイベントです。

その他のイベント

イベント名	説明
load	読み込まれたとき

　イベント処理を使って楽しいページを作ることができそうです。

マウス処理の例題

　マウスを動かして、画像を操作する例題を考えてみたいと思います。マウスを画像の上に持って行ったときと押し下げたときに、別の画像を表示させます。

　図1の左の図が立ち上げたときの図です。マウスを画像の上におくと、中央の図になります。マウスを押し下げると、右の図を表示します。

図1　例題実行画面

　リスト8は例題のリストです。

［リスト8］マウス処理の例題（reidai8.html）

<script type="text/javascript">
window.onload = function() 
{
    YUI().use('node', function(Y) {
        Y.on('mouseout',function(e){        //（1）
            e.target.set('src','./tora0001.png');
        },'#img');
        Y.on('mouseover',function(e){        //（2）
            e.target.set('src','./tora0002.png');
        },'#img');
        Y.on('mousedown',function(e){        //（3）
            e.target.set('src','./tora0003.png');
        },'#img');
        Y.on('mouseup',function(e){        //（4）
            e.target.set('src','./tora0002.png');
        },'#img');
    });
}
</script>
</head>
<body>
<div><img id='img' src='./tora0001.png'></div>
</body>

　（1）（2）（3）（4）それぞれのマウスイベントで画像を入れ替えています。マウスを押し下げたとき他のページへ飛ぶようにして、ボタンとして利用しても面白いのではないでしょうか。

まとめ

　今回はコアの機能のうち、ノードとイベントについて説明しました。次回は標準モジュールについて説明したいと思います。

　ノードとイベントのなかで、今回出てこなかったメソッドやプロパティもあります。開発に行き詰ったとき、YUI3のダウンロードページを開いて解説を読んでみると、良いヒントが見つかるかもしれません。