Yahoo! UIのイベントリスナー（addListener）を使ってみよう
つい先日Yahoo! UI Libraryが正式リリースされました。
バージョン0.2からバージョン1.0ではなく、いきなりバージョン2.2に。何故2.2なんだろう。
prototype.jsやjQueryだと機能が物足りない、、、と感じていたのですが正式リリースされたことと私の師匠の勧めもあり、YUIを使ってみました。で、使ってみたら、、、Yahoo! UI Libraryにはまりつつあります＾＾；ほとんどの機能はYahoo! UI Libraryでまかなえます。私はしばらくYahoo! UI Libraryを使ってみようと思います。まあ、浮気性なのでいつ別のフレームワークに移るか分かりませんが。
以前に、Yahoo! UIを使って非同期通信の紹介をさせて頂いたのですが今回はイベントリスナーを紹介します。
リスナーとは、予約機能みたいなものです。「マウスを動かした」「クリックした」「ウィンドウサイズを変更した」「キーボードのキーを押した」などの操作に対してHTMLの中にJavaScriptを埋め込むのが一般的かと思いますが、リスナーを使うとそれらの操作を事前に予約することができます。
・Yahoo! UI Library
*「Download YUI」ボタンをクリックするとダウンロードできます。
今回は、「yahoo-min.js」「event-min.js」を使いますので、この2つのファイルを適当なディレクトリにコピーしてください。
インストールに関しては、「Yahoo! UIライブラリを使ってみよう」をご覧ください。
今回作成するサンプルは以下の構成になります。
[home]
└─ index.html
└─ [js]
└─ yahoo.js
└─ event-min.js
早速、イベントリスナーを使ってみます。
まずは外部のJavaScriptを参照しましょう。
<script type="text/javascript" src="./js/yahoo-min.js"></script>
<script type="text/javascript" src="./js/event-min.js" ></script>
次に以下の関数を作ります。
<script type="text/javascript">
function windowOpen() {
alert("リスナーを使ってみよう");
}
</script>
「リスナーを使ってみよう」をいうテキストをダイアログ表示させるだけの簡単な関数です。
次に以下の1行を追加します。
<script type="text/javascript">
function windowOpen() {
alert("リスナーを使ってみよう");
}
YAHOO.util.Event.addListener(window, "load", windowOpen);
</script>
「YAHOO.util.Event.addListener」の部分がイベントリスナーになります。これでイベントリスナー実装が終わりです。
ここまで作り終わったら、ブラウザで表示してみてください。
表示した瞬間に「リスナーを使ってみよう」をいうテキストがダイアログで表示されると思います。
通常であれば、
<body onLoad="windowOpen();">
のように<body>タグのonLoad属性にwindowOpen()と入れるのですが、リスナーを使うと<script>内に機能を入れることが出来ます。
「YAHOO.util.Event.addListener」の引数の説明は以下の通りです。
YAHOO.util.Event.addListener(id, event, action);
id：対象のID属性名
（windowでウィンドウ全体）
event：対象になるイベント
action：イベント発生時に呼び出す関数名
第2引数のeventには以下のような種類があります。
イベントの種類
load：ページにアクセスした
unload：ページを移動した（破棄した）
mouseover：対象物の上にマウスがある
mouseout：対象物の上にマウスがない
click：マウスをクリックした
mousedown：マウスのボタンを押し下げた
mouseup：マウスのボタンを上げた
change：formなどの内容が変わった
keydown：キーボードのキーを押し下げた
keyup：キーボードのキーを押し上げた
これだけだと何が良いのかよく分からないのでもう少しだけ実用的な
テキストの上にマウスを乗せると背景色が変わって、マウスが外れると背景色が元に戻るような機能を作ってみます。
<script>タグの中に以下のスクリプトを追加してください。
function rollOver() {
this.style.backgroundColor = '#FFFF99';
}
function rollOut() {
this.style.backgroundColor = '#FFFFFF';
}
さらに、以下のスクリプト（リスナー）も追加してください。
YAHOO.util.Event.addListener("listener", "mouseover", rollOver);
YAHOO.util.Event.addListener("listener", "mouseout", rollOut);
「listener」というID属性名に「mouseover」した場合、「rollOver」という関数を実行しなさい。とリスナー（予約）しています。
更に、「listener」というID属性名に「mouseout」した場合、「rollOut」という関数を実行しなさい。とリスナー（予約）しています。
最後に<body>タグ内に以下のHTMLを追加します。
<div id="listener">テキストのロールオーバ</div>
<div>タグ内に「listener」というID属性を追加しています。
これでロールオーバが完成しました。完成したらブラウザでプレビューしてみましょう。
「テキストのロールオーバ」というテキストにマウスを乗せると背景色が変わると思います。
ロールオーバも<body>タグ内ではなく、リスナーを使って<script>タグ内に機能を記述することで、ソースを見易くしました。
完成版のソースは以下を参照してください。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>Yahoo!リスナー</title>
<script type="text/javascript" src="./js/yahoo-min.js"></script>
<script type="text/javascript" src="./js/event-min.js" ></script><script type="text/javascript">
function rollOver() {
this.style.backgroundColor = '#FFFF99';
}
function rollOut() {
this.style.backgroundColor = '#FFFFFF';
}YAHOO.util.Event.addListener("listener", "mouseover", rollOver);
YAHOO.util.Event.addListener("listener", "mouseout", rollOut);
</script>
</head><body>
<div id="listener">テキストのロールオーバ</div>
</body>
</html>
今回はイベントリスナー（addlistener）の紹介をさせて頂きました。
イベントリスナーを使うとHTMLソースが綺麗になります。しかし、下手に多様化すると解析が困難になるので別の作業者のことも考えてコーディングを行いましょう。
・関連記事
Yahoo! UIライブラリを使ってみよう