window.onload用法详解

时间 2020-08-03

标签 window.onload window onload 用法详解栏目 JavaScript 繁體版

原文原文链接

网页中的javaScript脚本代码每每须要在文档加载完成后才可以去执行，不然可能致使没法获取对象的状况，为了不这种状况的发生，可使用如下两种方式:javascript

一.将脚本代码放在网页的底端，这样在运行脚本代码的时候，能够确保要操做的对象已经加载完成。php

二.经过window.onload来执行脚本代码。css

第一种方式感受比较凌乱（其实推荐使用），每每咱们须要将脚本代码放在一个更为合适的地方，那么window.onload方式就是一个良好的选择。window.onload是一个事件，当文档加载完成以后就会触发该事件，能够为此事件注册事件处理函数，并将要执行的脚本代码放在事件处理函数中，因而就能够避免获取不到对象的状况。先看一段代码实例:html

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/"/> 
<title>window.onload
用法-蚂蚁部落</title>
<style type="text/css">
#bg{
  width:100px;
  height:100px;
  border:2px solid red;
}
</style>
<script type="text/javascript">
document.getElementById("bg").style.backgroundColor="#F90";
</script>
</head>
<body>
  <div id="bg"></div>
</body>
</html>

以上代码的初衷是向将div的背景颜色设置为#F90，可是并无实现此效果，这是由于代码是顺序执行的，当执行到document.getElementById("#bg").style.backgroundColor="#F90"这一句的时候，尚未加载到此div对象，因此设置也就不可以成功。代码修改以下:
java

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/"/> 
<title>位置高度div垂直居中-蚂蚁部落</title>
<style type="text/css">
#bg{
  width:100px;
  height:100px;
  border:2px solid red;
}
</style>
<script type="text/javascript">
window.onload=function(){
  document.getElementById("bg").style.backgroundColor="#F90";
}
</script>
</head>
<body>
  <div id="bg"></div>
</body>
</html>

以上代码实现了将div背景颜色设置为#F90的目的。缘由就是讲设置背景颜色的代码放置在window.onload的事件处理函数中，只有当文档加载完成后，才会执行事件处理函数，也才会执行设置背景颜色的脚本代码。
浏览器

事件处理函数绑定:ide

方式一:
window.onload=function(){}，在以上代码中就是使用此种方式为window.onload事件绑定事件处理函数，这里绑定的是一个匿名函数，固然也能够绑定非匿名函数，代码实例以下:
函数

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/"/> 
<title>window.onload用法详解-蚂蚁部落</title>
<script type="text/javascript">
window.onload=function myalert()
{
  alert("绑定成功！");
}
</script>
</head>
<body>
 
</body>
</html>

以上代码能够将为名myalert方法绑定到window.onload事件上，可是不能以如下方式为此事件绑定多个事件处理函数:
spa

window.onload=function a(){}
window.onload=function b(){}

以上代码并不能为window.onload事件绑定多个事件处理函数，而是最后一个会覆盖前面的全部函数。不过代码能够变通一下:
xml

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/"/> 
<title>window.onload
用法-蚂蚁部落</title>
<style type="text/css">
#bg{
  width:100px;
  height:100px;
  border:2px solid red;
}
</style>
<script type="text/javascript">
window.onload=function(){
  function a(){
    document.getElementById("bg").style.backgroundColor="#F90";
  }
  function b(){
    document.getElementById("bg").style.width="200px";
  }
  a();
  b();
}
</script>
</head>
<body>
  <div id="bg"></div>
</body>
</html>

以上代码实现了绑定多个事件处理函数一样的效果。
方式二:
可使用addEventListener()和attachEvent()为onload事件绑定事件处理函数，下面分别介绍一下：
addEventListener()是当前标准的一种事件处理函数绑定方式，可是IE8和IE8如下的浏览器并不支持此方式，实例以下:

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/"/> 
<title>window.onload
用法-蚂蚁部落</title>
<style type="text/css">
#bg{
  width:100px;
  height:100px;
  border:2px solid red;
}
</style>
<script type="text/javascript">
window.addEventListener("load",bg,false);
window.addEventListener("load",changeW,false);
function bg(){
  document.getElementById("bg").style.backgroundColor="#F90";
}
function changeW(){
  document.getElementById("bg").style.width="200px";
}
</script>
</head>
<body>
  <div id="bg"></div>
</body>
</html>

以上代码能够为window.onload事件绑定多个事件处理函数。简单介绍一下语法格式:

addEventListener("type",函数名,false)

addEventListener()函数具备三个参数，第一个参数事件类型，须要注意的是，事件类型名称前面不能有on，例如window.onload事件，在这个地方只能写做load，第二个参数是要绑定的函数名称，第三个参数通常为false。
使用attachEvent()函数绑定事件处理函数:
IE9以前的的IE浏览器不支持addEventListener()函数，因此attachEvent()函数就有了用武之地了，代码实例以下:

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/"/> 
<title>window.onload用法-蚂蚁部落</title>
<style type="text/css">
#bg{
  width:100px;
  height:100px;
  border:2px solid red;
}
</style>
<script type="text/javascript">
window.attachEvent("onload",bg);
window.attachEvent("onload",changeW);
function bg(){
  document.getElementById("bg").style.backgroundColor="#F90";
}
function changeW(){
  document.getElementById("bg").style.width="200px";
}
</script>
</head>
<body>
  <div id="bg"></div>
</body>
</html>

以上代码的效果和使用addEventListener()函数的效果是同样的，简单介绍一下语法格式:

addEventListener("type",函数名)

此函数只有两个参数，第一个参数是事件类型，不过它和addEventListener()的第一个参数的做用是同样，可是名称有所区别，名称前面是具备"on"，第二个参数就是要绑定的事件处理函数名称。为了兼容各浏览器，须要将以上代码进行改造，实例以下:

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/"/> 
<title>window.onload用法-蚂蚁部落</title>
<style type="text/css">
#bg{
  width:100px;
  height:100px;
  border:2px solid red;
}
</style>
<script type="text/javascript">
if(window.addEventListener){
  window.addEventListener("load",bg,false);
  window.addEventListener("load",changeW,false);
}
else{
  window.attachEvent("onload",bg);
  window.attachEvent("onload",changeW);
}
 
function bg(){
  document.getElementById("bg").style.backgroundColor="#F90";
}
function changeW(){
  document.getElementById("bg").style.width="200px";
}
</script>
</head>
<body>
  <div id="bg"></div>
</body>
</html>

以上代码代码解决了各大浏览器的兼容性问题。在上面代码中使用如下代码进行判断:

if(object.addEventListener){
  object.addEventListener();
}
else{
  object.attachEvent();
}

经过if语句判断对象是否具备addEventListener属性，若是有这使用addEventListener()函数，不然使用attachEvent()函数。

原文来源：http://www.softwhy.com/forum.php?mod=viewthread&tid=6191