body onload は使ってはいけない?

2008/03/08 | ラベル: , | このエントリーを含むはてなブックマークを表示

独自の Windows Vista サイドバー ガジェットを作成する より引用。

JavaScript をかじったことがある方なら、"eval is evil" という言葉を耳にしたことがあるでしょう。ご存じない方は、まず Web で調べてから続きをお読みください。 eval を使用すべきでない理由をおわかりいただけたところで、ここではこの規則に修正を加えて、JavaScript のテキストを HTML 内の属性に配置すべきではないという規則と、setInterval や setTimeout に文字列を渡すべきではないという規則を付け加えたいと思います。JavaScript のテキストを配置してはいけない属性には、body onload 属性も含まれます。この属性は eval ステートメントと同じように内部で解釈されるからです。 "body onload がだめならどうやってコードを実行するんだ" とおっしゃる方もいるでしょう。そのような方には、window オブジェクトの onload イベントに関数をアタッチする習慣を付けることをお勧めします。次のコードは、onload イベントと onunload イベントへのアタッチの方法を示しています。

function pageLoad() {
    window.detachEvent(“onload”, pageLoad);
    window.attachEvent(“onunload”, pageUnload);
    //page initalization here
}

function pageUnload() {
    window.detachEvent(“onload”, pageUnload);
    //gadget is closing, clean up
}

window.attachEvent(“onload”, pageLoad);

正直「evalステートメントと同じように内部で解釈されるからです」というのもよく分からなかったけど、上記のように書くほうが良いお作法ってことですかね。アタッチする方法だと複数の関数をつけることもできる。上記コードはちゃんと後片付けもしている。なるほど。

Firefox や Opera では addEventListener、removeEventListener を使う。

if (window.addEventListener)
  window.addEventListener("load", pageLoad, false);
else if (window.attachEvent)
  window.attachEvent("onload", pageLoad);
else
  window.onload = pageLoad;

0 コメント: