window.onload的使用方法
阿新 • • 發佈：2018-12-04
window.onload是在頁面載入完之後再載入的,程式是從上往下執行的,如果你不加window.onload.它會先執行<script></script>中的部分再執行body裡面的
1,以一個簡單延時提示框為例子:
程式碼如下:
這樣是正確的 而你刪除window.onload後會顯示 Cannot set property 'onmouseover' of null<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>延時提示框</title> <style type="text/css"> #div1{ width: 50px; height: 50px; background-color: red; float: left; margin: 10px; } #div2{ width: 200px; height: 200px; background-color: #CCCCCC; display: none; float: left; } </style> <script type="text/javascript"> window.onload=function(){ var oDiv1=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); var timer=null; oDiv1.onmouseover=oDiv2.onmouseover=function() { //設定div1的作用是：第二次移動到div1時，關閉div2設定的延時 //設定div2的作用是：滑鼠在div2時，關閉定時器 clearTimeout(timer); oDiv2.style.display='block'; }; oDiv1.onmouseout=oDiv2.onmouseout=function() //div2的mouseout是為了設定延時，滑鼠從div2移動到div1過程中，div2不會隱藏 { timer=setTimeout(function(){ //設定一個延時 oDiv2.style.display='none'; },500); }; } </script> </head> <body> <div id="div1"> </div> <div id="div2"> </div> </body> </html>
at 延時提示框.html:28
(anonymous) @ 延時提示框.html:28
而當你window.onload並且把<script></script>放到<body></body>下面,它又可以正常運行了
這就說明了window.onload的作用
2.使用window.onload時,例如一些點選事件,滑鼠移入移出事件要在script中定義，而不能在body裡的標籤裡面設定
這裡以一個點選運動為例子
這是使用window.onload方法的
程式碼如下：
這個時候，如果把點選事件寫到body中<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 200px; height: 200px; background-color: red; position: absolute; } </style> <script type="text/javascript"> window.onload=function(){ oBtn=document.getElementById('btn1'); var timer=null; oBtn.onclick=function() { var oDiv=document.getElementById('div1'); clearInterval(timer);//把之前開的定時器關閉，保證不管點選多少次，只有一個定時器在工作 timer=setInterval(function(){ var speed=1; if(oDiv.offsetLeft>=300) { clearInterval(timer); } else{ oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },30) } } </script> </head> <body> <input type="button" id="btn1" value="開始運動" /> <div id="div1"> </div> </body> </html>
即：
<script type="text/javascript">
window.onload=function(){
oBtn=document.getElementById('btn1');
var timer=null;
function startMove()
{
var oDiv=document.getElementById('div1');
clearInterval(timer);//把之前開的定時器關閉，保證不管點選多少次，只有一個定時器在工作
timer=setInterval(function(){
var speed=1;
if(oDiv.offsetLeft>=300)
{
clearInterval(timer);
}
else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30)
}
}
</script>
</head>
<body>
<input type="button" id="btn1" value="開始運動" onclick="startMove()"/>
<div id="div1">
</div>
</body>就會顯示：Uncaught ReferenceError: startMove is not defined
at HTMLInputElement.onclick (js運動基礎.html:37)
onclick @ js運動基礎.html:37
因為它先執行的onclick事件，後執行window.onload中的startMove方法，這個時候把window.onload刪掉就可以了
程式碼如下：
<script type="text/javascript">
oBtn=document.getElementById('btn1');
var timer=null;
function startMove()
{
var oDiv=document.getElementById('div1');
clearInterval(timer);//把之前開的定時器關閉，保證不管點選多少次，只有一個定時器在工作
timer=setInterval(function(){
var speed=1;
if(oDiv.offsetLeft>=300)
{
clearInterval(timer);
}
else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30)
}
</script>
</head>
<body>
<input type="button" id="btn1" value="開始運動" onclick="startMove()"/>
<div id="div1">
</div>
</body>