GlobalEventHandlers.onload
onload
は GlobalEventHandlers
ミックスインのプロパティで、Window
、XMLHttpRequest
、<img>
要素などで発生した load
イベントを処理するイベントハンドラーです。
load
イベントは指定されたリソースの読み込みが完了したときに発行されます。
構文
target.onload = functionRef;
値
functionRef
は、ウィンドウの load
イベントが発行されたときに呼び出されるハンドラー関数です。
例
window.onload = function() {
init();
doSomethingElse();
};
<!doctype html>
<html>
<head>
<title>onload test</title>
// ES5
<script>
function load() {
console.log("load イベントが検出されました。");
}
window.onload = load;
</script>
// ES2015
<script>
const load = () => {
console.log("load イベントが検出されました。");
}
window.onload = load;
</script>
</head>
<body>
<p>load イベントは、文書の読み込みが完了したときに発行されます。</p>
</body>
</html>
メモ
load
イベントは文書の読み込み工程の終了時に発行されます。このイベントが発行された時点で、文書中のすべてのオブジェクトが DOM 内にあり、すべての画像、スクリプト、サブフレームの読み込みが完了しています。
DOMContentLoaded
や DOMFrameContentLoaded
のような DOM イベント (EventTarget.addEventListener()
で扱うことが可能) もありますが、これらはこのページの DOM が構築された後、他のリソースの読み込みが完了する前に発行されます。
仕様書
Specification |
---|
HTML Standard # handler-onload |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
load
イベントDOMContentLoaded
イベント (イベントの待ち受け: 単純な DOM イベント内)- IIFE Immediately-invoked function expression