window.onload的使用方法

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>

window.onload的使用方法

猜你喜欢