快捷导航
查看: 131011|回复: 30

window.onload用法详解

[复制链接]
发表于 2013-3-20 01:36:49 | 显示全部楼层 |阅读模式
本帖最后由 蚂蚁小编 于 2017-7-11 17:47 编辑

window.onload用法详解:
更多JavaScript教程可以参阅JS教程版块。
网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式:
一.将脚本代码放在网页的底端,这样在运行脚本代码的时候,可以确保要操作的对象已经加载完成。
二.通过window.onload来执行脚本代码。
第一种方式感觉比较凌乱(其实推荐使用),往往我们需要将脚本代码放在一个更为合适的地方,那么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对象,所以设置也就不能够成功。代码修改如下:
[HTML] 纯文本查看 复制代码运行代码

<!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的事件处理函数中,只有当文档加载完成后,才会执行事件处理函数,也才会执行设置背景颜色的脚本代码。
事件处理函数绑定:
方式一:
window.onload=function(){},在以上代码中就是使用此种方式为window.onload事件绑定事件处理函数,这里绑定的是一个匿名函数,当然也可以绑定非匿名函数,代码实例如下:
[HTML] 纯文本查看 复制代码运行代码

<!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事件上,但是不能以以下方式为此事件绑定多个事件处理函数:
[JavaScript] 纯文本查看 复制代码运行代码
window.onload=function a(){}
window.onload=function b(){}

以上代码并不能为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">
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以下的浏览器并不支持此方式,实例如下:
[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">
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事件绑定多个事件处理函数。简单介绍一下语法格式:
[JavaScript] 纯文本查看 复制代码运行代码
addEventListener("type",函数名,false)

addEventListener()函数具有三个参数,第一个参数事件类型,需要注意的是,事件类型名称前面不能有on,例如window.onload事件,在这个地方只能写作load,第二个参数是要绑定的函数名称,第三个参数一般为false。
使用attachEvent()函数绑定事件处理函数:
IE9之前的的IE浏览器不支持addEventListener()函数,所以attachEvent()函数就有了用武之地了,代码实例如下:
[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">
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()函数的效果是一样的,简单介绍一下语法格式:
[JavaScript] 纯文本查看 复制代码运行代码
addEventListener("type",函数名)

此函数只有两个参数,第一个参数是事件类型,不过它和addEventListener()的第一个参数的作用是一样,但是名称有所区别,名称前面是具有"on",第二个参数就是要绑定的事件处理函数名称。为了兼容各浏览器,需要将以上代码进行改造,实例如下:
[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">
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>

以上代码代码解决了各大浏览器的兼容性问题。在上面代码中使用以下代码进行判断:
[JavaScript] 纯文本查看 复制代码运行代码
if(object.addEventListener){
  object.addEventListener();
}
else{
  object.attachEvent();
}

通过if语句判断对象是否具有addEventListener属性,如果有这使用addEventListener()函数,否则使用attachEvent()函数。

评分

参与人数 1金钱 +1 收起 理由
万俟兴 + 1 很给力! 就是收藏必须到第一楼的底部,有点.

查看全部评分

发表于 2017-8-9 16:00:41 | 显示全部楼层
admin 发表于 2017-8-9 15:52
暂时没有视频教程,不过有有文本教程,您可以参考一下,如有疑问可以随时留言,我们第一时间解答
http:/ ...

新手有没有好的学习建议啊 ?感觉要学的太多了,学到什么程度就可以找工作啊?
发表于 2013-5-5 23:24:56 | 显示全部楼层
window.onload=function a(){}
window.onload=function b(){}

上面的后者会覆盖前者的。可以写一个函数进行处理。
[HTML] 纯文本查看 复制代码运行代码

function AddonloadEvent(func)
                {
                   var oldonload=window.onload;
                   if(typeof oldonload!='function')
                   {
                        window.onload=func;
                   }
                   else
                   {
                       window.onload=function(){
                         oldonload();
                         func();
                       };
                   }
                  
                }
function a(){}
function b(){}
AddonloadEvent(a);
AddonloadEvent(b);
这样就可以都执行
 楼主| 发表于 2013-5-6 16:55:06 | 显示全部楼层
finder 发表于 2013-5-5 23:24
window.onload=function a(){}
window.onload=function b(){}

是的,确实如此
发表于 2015-12-8 18:18:21 | 显示全部楼层
不错的介绍,想想当年本人对这个事件感到很困惑,哈哈
发表于 2015-12-15 16:59:16 | 显示全部楼层
这个介绍的太详细了一点...
发表于 2016-4-19 17:22:27 | 显示全部楼层
我是初学者,虽然我没太看懂,不过我觉得挺不错
发表于 2016-4-19 19:07:54 | 显示全部楼层
sr1032989811 发表于 2016-4-19 17:22
我是初学者,虽然我没太看懂,不过我觉得挺不错

加油,大家都是从菜鸟走过来的
发表于 2016-7-28 14:00:13 | 显示全部楼层
,很详细,谢楼主,我这小白也看的懂
发表于 2016-10-23 09:02:53 | 显示全部楼层
LZ 你好。首先感谢下你的教程,受益良多。
我这里有几个疑问向你请教下:
1,JS中的window对象是不是指的是 “JS代码所在的文件” 所对应的窗口?
2,Object对象又具体指的是什么东西呢?下面的代码恕我愚钝,没能看懂。
if(object.addEventListener){
  object.addEventListener();
}
else{
  object.attachEvent();
}
发表于 2016-10-23 12:50:01 | 显示全部楼层
xiaole 发表于 2016-10-23 09:02
LZ 你好。首先感谢下你的教程,受益良多。
我这里有几个疑问向你请教下:
1,JS中的window对象是不是指的 ...

关于第一个问题,window对象你可以这么理解
第二个问题这个object对象指的是dom元素对象,这里是用来判断当前浏览器是否支持addEventListener方法,如果支持则使用addEventListener注册事件处理函数,否则使用attachEvent()方法来注册。
发表于 2017-1-9 14:54:52 | 显示全部楼层
楼主你好,请问一下为什么f1()写在window.onload里反而不能执行了
QQ截图20170109145216.jpg
发表于 2017-1-9 15:00:37 | 显示全部楼层
fc0511 发表于 2017-1-9 14:54
楼主你好,请问一下为什么f1()写在window.onload里反而不能执行了

你这么写的话确实不能够执行,因为句柄式注册事件处理函数
这个事件处理函数会在全局作用域中查找,也就是说会在全局作用域中查找f1()函数
然而此函数是声明在window.onload事件处理函数之中的
发表于 2017-1-9 15:08:26 | 显示全部楼层
caicai 发表于 2017-1-9 15:00
你这么写的话确实不能够执行,因为句柄式注册事件处理函数
这个事件处理函数会在全局作用域中查找,也就 ...

先谢谢 回答的好快,但是说的太专业了听不懂....
发表于 2017-3-1 21:28:59 | 显示全部楼层
谢谢谢谢你,写的特别好,我一直不知道如何用onload同时处理两个函数,去csdn提问也没人回答,在你这里解决了我的问题
发表于 2017-3-1 21:32:09 | 显示全部楼层
tal 发表于 2017-3-1 21:28
谢谢谢谢你,写的特别好,我一直不知道如何用onload同时处理两个函数,去csdn提问也没人回答,在你这里解决 ...

非常感谢对蚂蚁部落的支持
http://www.softwhy.com/qiduan/JS_source/
现在教程将要改成这种形式,不知道是否能接受
发表于 2017-4-26 12:19:03 | 显示全部楼层
请问下版主,给同一个div加了两个事件,js分别用两个函数对应onclick【控制显示隐藏】,onmouseout【控制移出隐藏】,用if(){}else{}判断display并切换,不过首次点击不会显示,然后第二次和以后的点击都正常了
发表于 2017-4-26 13:31:17 | 显示全部楼层
万俟兴 发表于 2017-4-26 12:19
请问下版主,给同一个div加了两个事件,js分别用两个函数对应onclick【控制显示隐藏】,onmouseout【控制移 ...

单独开个帖子,哥哥给你回复
发表于 2017-5-2 18:19:39 | 显示全部楼层
楼主,不懂你这是什么意思:
以上代码代码解决了各大浏览器的兼容性问题。在上面代码中使用以下代码进行判断:
if(object.addEventListener){
  object.addEventListener();
}
else{
  object.attachEvent();
}
通过if语句判断对象是否具有addEventListener属性,如果有这使用addEventListener()函数,否则使用attachEvent()函数。


上面说了
if(window.addEventListener){
  window.addEventListener("load",bg,false);
  window.addEventListener("load",changeW,false);
}
else{
  window.attachEvent("onload",bg);
  window.attachEvent("onload",changeW);
}
下面又说是上面的注释,什么意思啊?
if(object.addEventListener)跟if(window.addEventListener)有什么不同,什么关系?
发表于 2017-5-2 20:42:30 | 显示全部楼层
百分之百纯温柔 发表于 2017-5-2 18:19
楼主,不懂你这是什么意思:
以上代码代码解决了各大浏览器的兼容性问题。在上面代码中使用以下代码进行判 ...

其实没有特别的意思,就是单独摘抄出来核心代码,便于大家阅读
发表于 2017-5-2 23:14:58 | 显示全部楼层
if(object.addEventListener){
  object.addEventListener();
}
else{
  object.attachEvent();
}
这里的object是个什么东西?哪里来的,怎样得到的
发表于 2017-5-3 08:53:14 | 显示全部楼层
百分之百纯温柔 发表于 2017-5-2 23:14
if(object.addEventListener){
  object.addEventListener();
}

这里的object应该是DOM元素对象
如果当前浏览器支持addeventlistener方法,那么dom对象就存在这个方法
所以这么判断是合理的
发表于 2017-5-9 19:23:57 | 显示全部楼层
汉武大帝 发表于 2017-5-3 08:53
这里的object应该是DOM元素对象
如果当前浏览器支持addeventlistener方法,那么dom对象就存在这个方法
...

那么
if(window.addEventListener){
  window.addEventListener("load",bg,false);
  window.addEventListener("load",changeW,false);
}
else{
  window.attachEvent("onload",bg);
  window.attachEvent("onload",changeW);
}


if(object.addEventListener){
  object.addEventListener();
}
else{
  object.attachEvent();
}
有什么关系
发表于 2017-5-9 20:30:17 | 显示全部楼层
百分之百纯温柔 发表于 2017-5-9 19:23
那么
if(window.addEventListener){
  window.addEventListener("load",bg,false);

object只是一个对象的概称,包括window对象
所以这两个效果是一样的,如果真的要判断是否支持addEventListener,还是使用window对象吧,毕竟是在这个对象之上注册事件处理函数
发表于 2017-5-20 21:12:38 | 显示全部楼层
非常感谢楼主这么详细认真的分析和示例,几乎解决了目前我对window.onload的所有疑问,而且还有额外收获:attatchEvent,这样就完美的解决了浏览器兼容性问题,而且使自己的代码更加健壮,希望以后有疑问可以请教楼主
发表于 2017-8-9 15:49:25 | 显示全部楼层
老大 有视频可以看吗  菜鸟啊
发表于 2017-8-9 15:52:10 | 显示全部楼层
niusz 发表于 2017-8-9 15:49
老大 有视频可以看吗  菜鸟啊

暂时没有视频教程,不过有有文本教程,您可以参考一下,如有疑问可以随时留言,我们第一时间解答
http://www.softwhy.com/qiduan/JS_source/
这是js教程
发表于 2017-8-9 16:05:04 | 显示全部楼层
niusz 发表于 2017-8-9 16:00
新手有没有好的学习建议啊 ?感觉要学的太多了,学到什么程度就可以找工作啊?

js是核心基础,css起码要熟练
以本人的经验,就是多写多问,可能请教过程中很难过,坚持下来就好了
发表于 2017-8-9 16:05:50 | 显示全部楼层
admin 发表于 2017-8-9 16:05
js是核心基础,css起码要熟练
以本人的经验,就是多写多问,可能请教过程中很难过,坚持下来就好了

找到组织了,以后多多请教 哈哈
发表于 2017-8-9 16:07:45 | 显示全部楼层
niusz 发表于 2017-8-9 16:05
找到组织了,以后多多请教 哈哈

http://www.softwhy.com/qiduan/ 1.png
右侧是教程分类,有问题可以随时留言
发表于 2017-9-30 10:20:10 | 显示全部楼层
非常好的文章,支持

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-10-19 07:47 , Processed in 0.112579 second(s), 29 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

快速回复返回顶部 返回列表