回答:
一部のブラウザではdocument.onload、DOMの準備が整ったときに役割を引き継ぎ、起動します。
document.onload
window.onload最も広くサポートされているようです。実際、最新のブラウザの一部は、ある意味でに置き換えられdocument.onloadていwindow.onloadます。
ブラウザサポートの問題が、ドキュメントの準備ができているかどうかのチェックを処理するためにjQueryなどのライブラリを使用し始めている理由の多くは次のとおりです。
$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });歴史の目的のため。window.onloadvs body.onload：
同様の質問が、over の使用に関してコーディングフォーラムでしばらく前に尋ねられまし
window.onloadたbody.onload。結果window.onloadから、構造をアクションから分離するのが良いので、それを使用する必要があるように見えました。
window.onloadで<body onload="">完全に異なる選択に向けられているようです（そして、「アクションから分離した構造」は、このコンテキストでははるかに理にかなっています）。答えが間違っているわけではありませんが、その根拠は間違っています。
document.onloadはJSがjQueryと同等であることを意味しdocument.readyますか？
一般的な考え方は、ドキュメントのウィンドウが開いているときにwindow.onloadが発生するということです。、プレゼンテーションの準備とdocument.onload火災時にDOMツリー（文書内のマークアップコードから構築されたが）される完成します。
理想的には、DOMツリーイベントにサブスクライブすることで、Javascriptを介したオフスクリーン操作が可能になり、CPU負荷がほとんどかかりません。逆に、複数の外部リソースがまだ要求、解析、ロードされていない場合は、起動に時間window.onloadがかかることがあります。
►テストシナリオ：
違いを観察し、選択したブラウザが前述の方法を実装する方法イベントハンドラーを、ドキュメントの<body>-タグ内に次のコードを挿入します。
<script language="javascript">
window.tdiff = []; fred = function(a,b){return a-b;};
window.document.onload = function(e){
console.log("document.onload", e, Date.now() ,window.tdiff,
(window.tdiff[0] = Date.now()) && window.tdiff.reduce(fred) );
}
window.onload = function(e){
console.log("window.onload", e, Date.now() ,window.tdiff,
(window.tdiff[1] = Date.now()) && window.tdiff.reduce(fred) );
}
</script>►結果：
Chrome v20（およびおそらく最新のブラウザー）で観察可能な結果の動作を次に示します。
document.onloadイベントはありません。onload 内部で宣言されたときに2回起動します <body>、<head>（イベントがとして機能する場合document.onload）内で宣言されたときに1回発生します。window.onload、HTML- <head>要素の範囲内でイベントハンドラーを宣言します。►プロジェクト例：
上記のコードは、このプロジェクトのコードベース（index.htmlおよびkeyboarder.js）から取得されています。
ウィンドウオブジェクトのイベントハンドラのリストについては、MDNのドキュメントを参照してください。
イベントリスナーを追加
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
// - Code to execute when all DOM content is loaded.
// - including fonts, images, etc.
});
</script>Update March 2017window.addEventListener('load', function() {
console.log('All assets are loaded')
})$(window).on('load', function() {
console.log('All assets are loaded')
})window.addEventListener('load', function() {...})。回答も更新しました。
ブラウザはHTMLソースを解析し、遅延スクリプトを実行します。
すべてのHTMLが解析されて実行されるとDOMContentLoaded、A がディスパッチされdocumentます。イベントはにバブルしますwindow。
ブラウザは、ロードイベントを遅延させるリソース（画像など）をロードします。
loadイベントがで派遣されますwindow。
したがって、実行の順序は次のようになります。
DOMContentLoadedwindowキャプチャフェーズのイベントリスナーDOMContentLoaded のイベントリスナー documentDOMContentLoadedwindowバブルフェーズのイベントリスナーloadイベントリスナー（onloadイベントハンドラーを含む）windowのバブルloadイベントリスナー（onloadイベントハンドラーを含む）はdocument呼び出さないでください。キャプチャloadリスナーのみが呼び出される可能性がありますが、スタイルシートなどのサブリソースの読み込みが原因であり、ドキュメント自体の読み込みが原因ではありません。
window.addEventListener('DOMContentLoaded', function() {
console.log('window - DOMContentLoaded - capture'); // 1st
}, true);
document.addEventListener('DOMContentLoaded', function() {
console.log('document - DOMContentLoaded - capture'); // 2nd
}, true);
document.addEventListener('DOMContentLoaded', function() {
console.log('document - DOMContentLoaded - bubble'); // 2nd
});
window.addEventListener('DOMContentLoaded', function() {
console.log('window - DOMContentLoaded - bubble'); // 3rd
});
window.addEventListener('load', function() {
console.log('window - load - capture'); // 4th
}, true);
document.addEventListener('load', function(e) {
/* Filter out load events not related to the document */
if(['style','script'].indexOf(e.target.tagName.toLowerCase()) < 0)
console.log('document - load - capture'); // DOES NOT HAPPEN
}, true);
document.addEventListener('load', function() {
console.log('document - load - bubble'); // DOES NOT HAPPEN
});
window.addEventListener('load', function() {
console.log('window - load - bubble'); // 4th
});
window.onload = function() {
console.log('window - onload'); // 4th
};
document.onload = function() {
console.log('document - onload'); // DOES NOT HAPPEN
};document - load - capture実際に起こります。これは、ドキュメントのロードがなぜ私に起こらないのかについて私が検索で期待していたこととは逆です。奇妙なことに、それは矛盾しています。時々現れます、時々現れません、時々それは二度現れます-決してdocument - load - bubble起こりません。を使用しないことをお勧めしdocument loadます。
loadイベントが外部リソースでディスパッチされるとは考えていませんでした。そのイベントは泡立たないため、通常はドキュメントで検出されませんが、キャプチャ段階で検出されます。これらのエントリは、<style>および<script>要素のロードを参照します。Edgeはそれらを表示するのに適切であり、FirefoxとChromeは間違っていると思います。
useCaptureます、このオプションは私に何か新しいことを教えてくれました。
Chromeでは、window.onloadは <body onload="">ますが、Firefox（バージョン35.0）とIE（バージョン11）の両方で同じです。
次のスニペットでそれを探ることができます：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--import css here-->
<!--import js scripts here-->
<script language="javascript">
function bodyOnloadHandler() {
console.log("body onload");
}
window.onload = function(e) {
console.log("window loaded");
};
</script>
</head>
<body onload="bodyOnloadHandler()">
Page contents go here.
</body>
</html>そして、Chromeコンソールに「ウィンドウがロードされました」（最初に表示されます）と「body onload」の両方が表示されます。ただし、FirefoxとIEでは「body onload」と表示されます。window.onload.toString()IEとFFのコンソールで「」を実行すると、次のように表示されます。
「関数onload（event）{bodyOnloadHandler（）}」
つまり、 "window.onload = function（e）..."という割り当てが上書きされます。
window.onloadただし、多くの場合同じです。同様に、body.onloadはIEではwindow.onloadになります。
要するに
windows.onloadされてIEでサポートされていない6-8document.onload 最新のブラウザではサポートされていません（イベントは発生しません）
windowイベントを説明します：onloadとDOMContentLoaded。使用例：、window.addEventListener('DOMContentLoaded', callback)。2019年半ば以降、すべての主要ブラウザと互換性があります。----- developer.mozilla.org/en-US/docs/Web/API/Window/... ------ developer.mozilla.org/en-US/docs/Web/API/Window/load_event