イベント（割り込み処理）
イベント処理はユーザーとの対話的な処理には必要なものです。また、現在のJavaScriptでの開発の主体となっています。
イベント処理を利用するには、イベント処理のモジュールを指定するのではなく、イベントが起こった後に行いたい処理のモジュールを設定してプログラムを作成します。イベント処理はどのモジュールにも含まれていると考えてよいでしょう。
イベント処理の書き方
イベント処理は、.on()で設定します。最初の引数で、どのようなイベントで起動するかの指定を行い、次にどのような処理をさせるかを指定します。以下構文です。
要素のインスタンス.on(イベント名,処理関数)
要素のインスタンスは前項で説明した、one()、all()を使用して取得します。リスト6をみてください。
<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を書き直してみました。
<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の左の図が立ち上げたときの図です。マウスを画像の上におくと、中央の図になります。マウスを押し下げると、右の図を表示します。
リスト8は例題のリストです。
<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のダウンロードページを開いて解説を読んでみると、良いヒントが見つかるかもしれません。
