コンポーネントに対するイベント処理の設定
もう1つの基本は、マウスがクリックされたら何かの処理をする、といったイベント処理だ。それを設定する例を以下に3つ示す。詳細はドキュメントを参照していただきたい。
例1と例2はどちらもボタンがクリックされたときのイベント処理を設定する記述だが、例1はYAHOO.util.Eventクラス、例2はウィジェットのメソッドで行っている。
例1 addListenerによるイベント処理の設定
YAHOO.util.Event.addListener(
YAHOO.util.Dom.get( 'ボタンのID' ), 'click',
function( e ) { /* イベント処理 */ }
);
例2 Buttonウィジェットにイベント処理を設定
var button = new YAHOO.widget.Button( 'ボタンのID' );
button.on( 'click', function( e ) { /* イベント処理 */ } );
このほか、例3のようにコンテンツが利用可能になった時点で実行されるというタイプのイベント処理も設定可能だ。画面表示やノードの追加/変更時などに用いることができる。
例3 ノードが利用可能になった時点で実行されるイベント処理
YAHOO.util.Event.onAvailable( 'ノードのID', function() {
/* イベント処理 */
});
今回は最後ということで、ノードの操作やイベント処理の設定について紹介した。YUIには、さまざまなウィジェットやアニメーションといった機能がまだまだ多く存在する。ぜひAjaxアプリケーションで活用していただきたい。
