onLoad | JavaScript

初版2013/01/07：最終更新日2013/03/08

onLoad

目次
・onLoad ・onLoadイベントを複数実行する

onLoad

onLoadイベントはページが読み込まれた時に発生するイベントです。
このページをロードした時点でアラートが表示されます。

<html>
<head>
<title></title>
<script type="text/javascript">
function a(){
    alert("ロード");
}
</script>
</head>
<body onLoad="a();">

</body>
</html>

onLoadイベントを複数実行する

addEventListenerまたはattachEventを使用してonloadの競合を防ぐことができます。
また、これは複数のonloadを実行できることでもあります。以下は、onloadを二つ記述しています。
通常は、後から書いたonloadが実行されるだけになります。サンプルです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload = b;
function a(){
    alert("ロード1");
}
function b(){
    alert("ロード2");
}
</script>
</head>
<body onLoad="a();">

</body>
</html>

onloadイベントを二つとも実行したい場合は以下のようにaddEventListenerとattachEventを使用して書き換えます。
以下のソースを実行すると、onloadイベントが二つとも実行されます。サンプルです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
//window.onload = b;
function a(){
    alert("ロード1");
}
function b(){
    alert("ロード2");
}
function addEvent(){
    if(window.addEventListener){
        window.addEventListener('load',a,false);
        window.addEventListener('load',b,false);
    }else{
        window.attachEvent('onload',a,false);
        window.attachEvent('onload',b,false);
    }
}
addEvent();
</script>
</head>
<body>

</body>
</html>

HOME