TOP＞システム開発＞ onloadイベント記法の推移

JSライブラリ・ラボ - これで君もライブラリ開発者だ！ 第２回：jQueryライブラリの内部とonloadイベント記法 著者：川崎 有亮   2007/3/28

前のページ  1  2

onloadイベント記法の推移

HTML中のscript要素に記述したJavaScriptは、ページ全体のブラウザー描画が完了する前でも、そのscript要素が登場した時点でJavaScriptコードが実行されます。そのため、document.write()メソッドでHTMLを出力すると、内部的にはそのscript要素の直後にHTMLが追記されるわけです。    しかし、DOM操作を行うコードなど、ページ全体の描画が完了してDOMツリーが完成した後で初めて実行させたい場合もあります。そのような場合は、onloadイベントを利用して、ページの描画が終わった後で実行されるJavaScriptコードを定義する必要があります。

body要素のonload属性に定義する方法

従来型のonloadイベント呼び出しの定義方法は、body要素のonLoad属性にJavaScriptコードを埋め込むものでした。    しかし、これではJavaScriptコード中にダブルクオートも使えないほか、HTML中にJavaScriptコードが埋め込まれて分かりにくいなど、あまりお勧めできません。 <body onLoad="alert('Hello, World! (body)');">

script要素でwindow.onloadを定義する方法

そこで、body要素に埋め込むのではなく、script要素でwindow.onloadに関数を定義する方法が多く使われるようになりました。    この方法では、script要素内のコードをそのまま外部ファイル化して、HTMLとJavaScriptを分離することも可能になります。    ただし、window.onloadに定義できるイベントは1件のみで、2回以上定義すると最初のイベントが上書きされ、実行されない点は注意が必要です。イベントを上書きでなく追加するメソッドもありますが、ブラウザー間の互換性がないため使用しづらいところがあります。 <script><!--    window.onload = function(){       alert('Hello, World! (window.onload)'); } //--></script>

prototype.jsを利用する場合

クロスブラウザ対応で複数のonloadイベントの定義を行うには、prototype.jsのEvent.observe()メソッドを利用します。ライブラリを利用することで、ブラウザ間の互換性はprototype.jsが吸収してくれるため、プログラマはInternet Explorer・Firefox・Safariなどの差異を気にすることなくイベント処理を記述ことができます。 <script src="src/prototype.js"></script> <script><!--    Event.Observe( window, "load", function(){       alert('Hello, World! (prototype.js)');    }); //--></script>

jquery.jsを利用する場合

また、前ページで解説したjquery.jsライブラリを利用するとより簡易な表記が可能になります。しかも、既にonloadイベントが発行済の場合には「function(){}」内で定義したコードが即時実行される仕組みになっています。単にコードを「$(function(){ 〜 })」で囲っておくだけで、実行されるタイミングがonload前か後か（DOM構築が完了しているか否か）を気にする必要がありません。    さらに、通常のonloadイベントではページ内の全ての画像ファイル等の読み込みも完了してからコードが実行されるのに対し、jquery.jsはHTMLのDOM解析が完了した途端にコードを実行できるアクセラレーション機能を備えています（注4）。画像ファイル読み込みを待たずに処理が開始するため、ユーザーの待ち時間が減って見た目の速度が向上する効果があります。 ※注4：IE・Firefox・Opera・Safariと、通常利用されるほとんどのブラウザーに対応。何らかの原因で失敗した場合やその他のブラウザーに備えて、window.onloadも併用することで互換性を確保している。    今後のonloadイベントを記述するページでは、jquery.jsを利用するのがもっとも便利なのではないでしょうか。 <script src="src/jquery.js"></script> <script><!--    $(function(){       alert('Hello, World! (jquery.js)');    }); //--></script>

次回は

次回は、「Yahoo! UIライブラリ（YUI）」について解説していきます。

前のページ  1  2

著者プロフィール 川崎 有亮 1977年東京生まれ。AjaxなどWeb技術のアーキテクト。株式会社かっぺを経て、現在は株式会社リクルート事業開発室に所属。技術評論社「Ajax／実装のための基礎テクニック」（共著）など書籍・雑誌記事の執筆も多数。 Kawa.net xp：http://www.kawa.net/

INDEX 第2回：jQueryライブラリの内部とonloadイベント記法   jQueryライブラリを解剖する onloadイベント記法の推移

JSライブラリ・ラボ - これで君もライブラリ開発者だ！ 第1回 Prototypeライブラリの内部 第2回 jQueryライブラリの内部とonloadイベント記法 第3回 YUIライブラリと外部JSの呼び出し手法 第4回 JavaScriptライブラリの作成 第5回 グローバル変数の制御と更新履歴ファイル 第6回 自作ライブラリの公開とJavaScriptライブラリの今後