Yahoo UI LibraryはDOMのオブジェクトに対してイベントを設定することができます。このイベント設定は従来から行なわれているon〜で設定されるものと異なり、DOMに準拠した形でイベントが追加されます。これは、どういうことかというと古くから使われているonClick=〜では最後に設定されたイベントしか実行されませんが、DOMに準拠したものでは以前に設定されたイベントが上書きされ消されることなく実行させることができます。
Yahoo UI Libraryでイベントを追加するにはYAHOO.util.Event.addListener()を使います。最初のパラメータにイベントを追加するオブジェクトを指定します。2番目のパラメータにはイベント名を指定します。このイベント名はクリックであればclick、マウスオーバーであればmouseoverを指定します。間違ってonclickやonmouseoverを指定しないようにしてください。主なイベント名を以下に載せます。
| click | クリック |
|---|
| mouseover | マウスが重なった |
|---|
| mouseout | マウスが離れた |
|---|
| keydown | キーが押された |
|---|
| keyup | キーが離された |
|---|
| load | 読み込みが完了した |
|---|
ページが読み込まれたら指定されたエレメント（タグ）に文字を表示させてみましょう。ページの読み込みが完了したらwindowオブジェクトでloadイベントが発生します。これは古い書き方では<body pnLoad="〜">のような感じになります。ページ内に文字を表示するにはYAHOO.util.Dom.get()を使って行ないます (Dom操作を参照)。
実際のサンプルは以下のようになります。（サンプル01を実行する）
【サンプル01】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript"><!--
YAHOO.util.Event.addListener(window, "load", function(){
YAHOO.util.Dom.get("contents").innerHTML = "ヤフ〜!!";
});
// --></script>
</head>
<body>
<h1>ページが読み込まれたら文字を表示します</h1>
<div id="contents"></div>
</body>
</html>
実際にイベントを設定するのはフォームのボタンや画像およびリンクが多いはずです。先ほどYAHOO.util.Event.addListener()の最初のパラメータにはイベントを設定するオブジェクトを指定すると書きましたが、直接オブジェクトを指定する以外にエレメント（タグ）のID名を指定することもできます。以下のサンプルでは入力フォームのボタン (ID名 : dispButton) にクリック時のイベントを設定します。（サンプル02を実行する）
【サンプル02】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript"><!--
YAHOO.util.Event.addListener(window, "load", function(){
YAHOO.util.Event.addListener("dispButton", "click", function(){
YAHOO.util.Dom.get("contents").innerHTML = "ヤフ〜!!";
});
});
// --></script>
</head>
<body>
<h1>ボタンが押されたら文字を表示します</h1>
<form>
<input type="button" value="文字を表示" id="dispButton">
</form>
<div id="contents"></div>
</body>
</html>
基本的には、どのエレメント（タグ）でも上記のようにして各種イベントを設定することができます。これ以外にYahoo UI Libraryではページ上のエレメントが操作可能になった場合に発生するイベントにも対応した命令が用意されています。これは何かというと従来のloadイベントではページ全体のデータが読み込まれない限りDOM操作を行うことができませんでした。特にデータが大きい場合には、ユーザーによるページ上のエレメントの操作ができません。従来では、これを解決するために操作対象となるHTMLタグの直下に<script>タグを記述するということが行なわれていました。
しかし、これではHTMLファイルとスクリプトファイルを分離できないため、作業を分担するのが難しくなります。そこで、これを解決するのがYAHOO.util.Event.onDOMReady()です。YAHOO.util.Event.onDOMReady()は1つのパラメータを設定します。これは、DOM操作が可能になった場合に実行する命令を指定しておきます。これによりページ内容が全て読み込まれなくても、操作が可能になったエレメント（タグ）から処理を実行させることができます。
実際のサンプルは以下のようになります。（サンプル03を実行する）
【サンプル03】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript"><!--
YAHOO.util.Event.onDOMReady(function(){
YAHOO.util.Dom.get("contents").innerHTML = "ヤフ〜!!";
});
// --></script>
</head>
<body>
<h1>DOMの準備ができたら文字を表示します</h1>
<div id="contents"></div>
</body>
</html>
[
目次へ]