window.onload的使用方法

来源：互联网发布：java getclass 编辑：程序博客网时间：2024/05/22 15:07

window.onload是在页面加载完之后再加载的,程序是从上往下执行的,如果你不加window.onload.它会先执行<script></script>中的部分再执行body里面的

1,以一个简单延时提示框为例子:

代码如下:

<!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>

这样是正确的而你删除window.onload后会显示 Cannot set property 'onmouseover' of null
at 延时提示框.html:28
(anonymous) @ 延时提示框.html:28

而当你window.onload并且把<script></script>放到<body></body>下面,它又可以正常运行了

这就说明了window.onload的作用

2.使用window.onload时,例如一些点击事件,鼠标移入移出事件要在script中定义，而不能在body里的标签里面设置

这里以一个点击运动为例子

这是使用window.onload方法的

代码如下：

<!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>

这个时候，如果把点击事件写到body中
即：

<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>

阅读全文

0 0