window.onload的一些说明
window.onload事件对于初学者来说，经常会让我们感觉不好理解，并且经常会犯一些错误，初学js的时候经常碰到有关于它的问题，我想和我一样很多初学者也会碰到，那时候不懂它的具体作用，只要一写代码就用window.onload，基本写一个方法就用一次，往往在同一个页面里面会多次去使用它，那时候甚至以为它是方法的一部分，在写方法时必须要用到它，当然这是一个误区，下面是以前初学时的用法：
window.onload = function(){
......
}
window.onload = function(){
......
}
但是每次这么写完都会出问题，不是这个方法没执行，就是那个方法没起作用！
起初并不明白，这到底是为什么？后来经过多次实践发现：
每个页面只能使用一次window.onload,而且多次使用的话，只有最后一次绑定的方法可以执行！
这是什么原因了？我们应该怎么正确的使用它了？它的作用又是什么了？怎么给他绑定多个方法了？我想这些应该是很多初学者都会有的疑问！
下面我们就来好好的了解一下window.onload!
看这样一段代码：
<html>
<head>
<title>hello world</title>
<script type="text/javascript">
var oBox = document.getElementById("box");
oBox.style.color = red;
</script>
</head>
<body>
<div id="box">hello world!</div>
</body>
</html>
首先window.onload的作用是当页面加载完成后自动触发该事件，有时候我们会在网页头部加载或直接写js，这样在页面加载到js的时候，页面的body里的标签等都还没有加载到，而我们写js经常会获取页面的dom元素，如上例所示，在这种情况下，我们执行上例代码，不但无法获得我们想要的结果，而且还会报错！就是因为在页面加载到并执行js的时候页面标签还没有加载出来！所以这时候获取标签会报错！这是我们可以用window.onload来修改上面代码：
<html>
<head>
<title>hello world</title>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById("box");
oBox.style.color = red;
}
</script>
</head>
<body>
<div id="box">hello world!</div>
</body>
</html>
这样就不会有问题了！当然你也可以不使用window.onload而改为把js代码写在页面底部也是不会有为题的！
window.onload的用法如下：
window.onload = function(){
alert("hello world!");
}
或者这样：
function sayHello(){
alert("hello world!");
}
window.onload = sayHello;//值得注意的是，这里只需写方法名，不能加小括号，因为这里相当于是对方法的一个引用，加小括号的话就变成调用了！
其次使用上面的方法window.onload是不能同时加载多个函数的！这是为什么了？
其实，在这里，我们不妨把window.onload当成是一个变量，把函数绑定看成是给变量赋值，这样就比较好理解了，当我们多次给同一个变量赋值时，后赋的值会覆盖掉前面所赋的值！同样的道理，在一般方法的事件绑定中，后绑定的函数会覆盖掉先绑定的函数！这就是多次绑定，只执行最后一次绑定方法的原因！
那么我们怎么给他绑定多个函数了？其实我们可以这样处理：
function a1(){......}//方法一
function a2(){......}//方法二
......
function an(){......}//方法n
//事件绑定
window.onload = function(){
a1();
a2();
...
an();//注意，这里是方法调用，所以必须有小括号
}
那么如果我们在前面已经给window.onload绑定了函数，后面又要进行绑定，那该怎么办了？不要着急，办法总是有的，请看这里：
function addLoadEvent(func) {
var oldonload = window.onload;//得到上一个onload事件的函数
if (typeof window.onload != 'function') {//判断类型是否为'function',注意typeof返回的是字符串，如果不是，直接绑定！
window.onload = func;
} else { //如果是：
window.onload = function() {
oldonload();//调用之前覆盖的onload事件的函数
func();//调用当前事件函数
}
}
}
我们可以使用上诉方法来尝试一下,看看具体用法：
function t(){
alert("t")
}
function b(){
alert("b")
}
function c(){
alert("c")
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(t);
addLoadEvent(b);
addLoadEvent(c);
//等价于 window.onload =function() { t(); b(); c() ;}
以上就是关于window.onload绑定多个函数的一些方法，当然你还可以使用attachEvent和attachEvent来进行事件绑定，在这里就不多做介绍了，有兴趣的同学可以去百度一下！
好了，看到这里相信到家对window.onload应该有一个比较基本的了解了，当然由于本人水平有限，所以讲解的不是很透彻还请各位看官多多包含！
本文由 平凡公子原创并首次发布，欢迎转载（转载请注明作者及本文地址）！
window.onload的一些说明的更多相关文章
- 谈谈document.ready和window.onload的区别
在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){}) 这两个方法的效果都是一样的,都是在dom文档树加载完之后执行 ...
- $(document).ready() 与window.onload的区别
1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 ...
- JS:window.onload的使用
1.最简单的调用方式 直接写到html的body标签里面,如: (html) (body onload="func()") (/body) (/html) 2.在JS语句调用 (s ...
- jQuery $(document).ready() 与window.onload的区别
ps:jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,虽然具有类似的效果,但是它们在触发操作的时间上存在着微妙的差异. 在j ...
- window.onload =writeMessage(); 与window.onload =writeMessage;的区别
window.onload =writeMessage(); window.onload =writeMessage; 异:第一种是window加载时执行writeMesage方法,第二种是把writ ...
- $(document).ready,$(window).load,window.onload区别和联系
$(document).ready是在dom结构加载完毕就执行. $(window).load 等价于window.onload,必须等到页面内包括图片的所有元素加载完毕后才能执行. $(docume ...
- window.onload和$(document).ready(function(){})的区别
前段时间在面试之前查找并整理了一下window.onload和$(document).ready(function(){})区别,今天有时间更到我的博客上,由于本人资历尚浅,如有不对的地方,还请指正. ...
- window.onload与$(document).ready()的区别
对于很多初学者来说,window.onload出现在代码中的频率非常高,这似乎变成了一种习惯,可是并不知道具体为什么要加这句代码,可以做几个试验对比: 实验一: <script> docu ...
- jquery中 $(document).ready()和window.onload的区别
1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 ...
- js window.onload 的一个验证
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. 以下验证是否是图片加载完成后才执行 <img class="icon" id="ic ...
随机推荐
- 【转载】springboot + swagger
注:本文参考自 http://www.jianshu.com/p/0465a2b837d2 https://www.cnblogs.com/java-zhao/p/5348113.html swagg ...
- 解决app频繁更新方案
目前由于我们项目的特定场景,app的主要问题在于如何做到可以频繁更新而不需要频繁发布,尤其是ios,发布app store的周期基本上是2周左右,虽然可以通过企业号解决,但是后期的打包,分发给用户仍较 ...
- Linux od命令（以指定进制显示文件）
从“读取二进制文件”出发,到od命令的使用 在桃村实习期间,一直努力做毕业设计,我的毕业设计中有一个内容就是读取SEGY文件.在读取文件时,经常遇到的问题时你要读取浮点型数据,这时你就必须考虑你所使用 ...
- 存储过程中SELECT INTO的使用
在MySQL存储过程中使用SELECT …INTO语句为变量赋值: 用来将查询返回的一行的各个列值保存到局部变量中. 要求: 查询的结果集中只能有1行. SELECT col_name[,...] I ...
- 绑定方式开始服务&调用服务的方法
1.编写activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/androi ...
- asp.net 验证码
Before proceeding with the topic first we must understand "What is a Captcha code?" and &q ...
- Linux 查看目录大小及文件数量命令
查看当前目录大小: [root@21andy.com]# du -sh 查看指定目录大小: [root@21andy.com]# du -sh /www/21andy.com 查看当前目录文件总数: ...
- SaltStack salt 命令
salt 是服务端远程批量操作多台客户端需要使用到的命令,常见用法如下: salt '*' # 指定对所有客户端主机进行操作 salt 'minion01' # 指定对单台客户端主机进行操作 salt ...
- linux 开机自启转载
设置开机启动示例: # touch /etc/init.d/rc.local 设置为可执行: # chmod +x /etc/init.d/rc.local 用 update-rc.d 设置启动级别: ...
- codeforces水题100道 第五题 Codeforces Round #304 (Div. 2) A. Soldier and Bananas (math)
题目链接:http://www.codeforces.com/problemset/problem/546/A题意:一个人现在有n元,它买第i根香蕉需要i*k元,问他要买w根香蕉的话,需要问他的朋友借 ...