onloadイベント（ロードイベント）とは、オブジェクトを読み込み終わった時のイベント。
特に、ページや画像を読み込み終わった時点にイベントハンドラを登録したい場合に使うことが多い。
構文
HTML
<element onload="イベントハンドラ">
例
BODY要素
ページを読み込み終わった時点にイベントハンドラを登録する場合。
<body onload="イベントハンドラ">
IMG要素
画像を読み込み終わった時点にイベントハンドラを登録する場合。
<img onload="イベントハンドラ" />
JavaScript
object.onload = function(){ イベントハンドラ };
例
window
ページを読み込み終わった時点にイベントハンドラを登録する場合。
window.onload = function(){ イベントハンドラ };
サンプル
JavaScript上で動的にイベントハンドラを登録するサンプル。
0
サンプルについて
JavaScript上で動的にイベントハンドラを登録するタイプのサンプル。
サンプルの動作について
「カウントアップ」ボタンをクリックする度に、ボタンの右横の数値に１を加算する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
document.getElementById( "sampleButton" ).onclick = function(){
countUp();
};
}
var $count = 0;
function countUp() {
document.getElementById( "sampleOutput" ).innerHTML = ++$count;
}
</script>
window.onload = function () {
document.getElementById( "sampleButton" ).onclick = function(){
countUp();
};
}
var $count = 0;
function countUp() {
document.getElementById( "sampleOutput" ).innerHTML = ++$count;
}
</script>
HTML
<p>
<button id="sampleButton">カウントアップ</button>
<span id="sampleOutput" style="margin-left: 10px;">0</span>
</p>
<button id="sampleButton">カウントアップ</button>
<span id="sampleOutput" style="margin-left: 10px;">0</span>
</p>