somemo programming etc.

プログラマ、雑記、プログラミング関係はLinkから、数式はこっちでまとめていることが多い

【Javascript】onloadとDOMContentLoadedとreadyなどなど

Javascriptを使っていてよく目にする起動時に発生するイベント名についてのメモです。

具体的にイベント名を上げると、以下の3つ?になります。

  • なにも指定しない
  • onload
  • ready(jQuery)

何も指定しない

Javascriptは、イベント等を指定しない限り読み込んだら処理を実行します。そのため、使い始めたころは指定していなかったので、~が宣言されていません。などDOM(html要素)が読み込まれていない場合はもちろん発生します。

onload

Javascriptに慣れたころ、onloadを学び、bodyタグによくつけていました。実際にJavascriptの処理対象はコンテンツに対してなので、(画像等も)読み込み完了後にエラーが発生しない状況下で処理を実行していました。

ready

さらにJavascriptに慣れたころ、jQueryをよく耳にするようになりました。onloadと違い、画像等の読み込みまで完了してからではなく、DOMだけを対象にするので早いです。ここで疑問に思いました。jQueryはライブラリなのでreadyのもとになっているJavascriptの処理があるのではないか?その正体が、DOMContentLoadedだそうです。

DOMContentLoaded

名前のとおり、DOMの読み込み終わりましたということです。まさにreadyですね。

ではなぜDOMContentLoadedを耳にすることがなかったのか?理由はたぶん、IEでは使えないらしいから・・・jQueryはこんなところでもがんばってたんだなぁと思いました。

また疑問が浮かびます。DOMContentLoadedを使えないIEではどうしているのか?。jQueryでは、doScrollというイベントを見て判断しているそうです。ここらへんから難しいので省略・・・あとは参考を見てください。

参考