フェノメナ技術担当のレミです。JavaScriptを書くにあたって、onload や onreadyの様なイベントを使うことは少なくはないです。
ここでは、最初にページがロードしたときにアクションを起こしたいといった場合を想定します。
さて、
body.onload
body.onready
document.onload
document.onready
window.onload
window.onready
。。。のどれを使えば良いのでしょうか。
onloadとはどんな時に起動されるイベント?
現在のonloadはページのリソース(CSSファイル・JSファイルなどを含め)が完全にローディング済みという状態になったとたんに起動されるイベントになっています。
onreadyとはどんな時に起動されるイベント?
onreadyイベントというのはjQueryが導入するイベントになっています。jQueryのonreadyイベントはCSSやJSが完全にローディングされることを待たず、HTML・DOMがローディング済みになるとすぐ起動されます。それがonloadとonreadyの大きな違いです。
ちなみに、jQueryオブジェクト「$」を利用しなくてもJavaScriptのdocumentオブジェクトに追加されるので、そのまま利用が可能になっています。
つまり、jQueryが導入されていれば、$(document).ready(function(){}); しなくても、document.onready = function(){} が使えるということです。
またjQueryはdocumentオブジェクトにしかonreadyイベントを加えないので、window.onreadyやbody.onreadyをしても全く意味がないです。
window.onload VS document.onload
元々は、document.onloadは最近でいうonreadyの役割をはたしていたが、今はonreadyが同じ役割をよりクロスブラウザで果たしているので、誤解が生じるということで、最近のブラウザではdocument.onloadが完全に無くされました。
window.onload VS body.onload
この二つは完全に同じ役割を果たしています。最近のブラウザで実験してみたところ、二つが同時に使われる場合には、body.onloadのみが起動されます。body.onloadが存在しなければwindow.onloadが起動されます(現在Chrome 41及びFirefox 36で確認済み)。
結論としては
結論としては、全てのコンテンツがローディングされてからのアクションを起こしたい時には、window.onload を使うようにしましょう。
そして、より早く起動される、あらゆるHTMLだけがローディング済みでアクションしたい時には、jQueryを導入し、document.onreadyまたは$(document).ready() を使いましょう。