■
YAHOO.util.Eventクラスを利用する
#ホントはExt.jsを使いたかったが、商用利用不可っぽいのであきらめ。
メリット
・イベントハンドリングをクロスブラウザ実装している
（自分でイベントハンドリングする場合はFFはaddEventListener()、IEはattachEvent()を使わなければならない。）
・DOMのロードタイミングを意識しなくてよい
onAvailableとonContentReady
<script type="text/javascript">
var clickEvent = function() {alert("click!");}
var obj = document.getElementById("myelementid");
obj.addEventListener('click', clickEvent, false);
<div id="myelementid">my element</div>
のようにインラインでjavascriptを書くと
my element
がレンダリングされる前にvar obj = document.getElementById("myelementid");が実行されてしまうのでalertはnullで表示される。
この書き方でどうしてもやりたい場合は
<div id="myelementid">my element</div>
<script type="text/javascript">
var clickEvent = function() {alert("click!");}
var obj = document.getElementById("myelementid");
obj.addEventListener('click', clickEvent, false);
のように
my element
の後にjavascriptを書く必要がある。YUIライブラリのYAHOO.util.Eventを利用するとこのような悩みをしなくてよい。
<script type="text/javascript">
function TestObj(id) {
YAHOO.util.Event.onAvailable(id, this.handleOnAvailable, this);
}TestObj.prototype.handleOnAvailable = function(me) {
alert(this.id + " is available");
}var obj = new TestObj("myelementid");
<div id="myelementid">my element</div>
TestObjの初期化時にYAHOO.util.Event.onAvailableを呼ぶようにする。
このYAHOO.util.Event.onAvailableを利用するとメソッドをハンドリングしたいエレメントが読み込まれるのを待ってから
メソッドをハンドリングしてくれる。
jQueryのonready()より汎用的に使えるかもしれない。
※YAHOO.util.Event.onAvailableとYAHOO.util.Event.onContentReady違い
onContentReadyはメソッドをハンドリングするターゲットエレメントの兄弟ノードが読み込まれるまでハンドリング処理実行を待つ。
ターゲットエレメントの兄弟ノードが検出されなかった場合はwindow.loadイベントでハンドリングを実行する。
onDOMReady
YAHOO.util.Event.onDOMReadyはDOMが構造的に実行可能な状態なるのを待ってからハンドリングを開始する。
IEではDOM構造が読み込み完了状態でない時に任意のエレメントにデータなどを差し込む（innerHTMLとか）とクラッシュするバグがある。
ダイナミックなデータ書き換えなどをする場合に便利かも。
※ちなみにwindow.onloadイベントはページ内の全てのオブジェクトが読み込まれてから実行する。
例えば大量の画像や重い画像がある場合はそれが読み込まれるまで実行されない。
しかしonDOMReadyはDOM構造が実行可能なら処理を開始する
