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 ...
随机推荐
- jQuery easyUI的datagrid，如何在翻页以后仍能记录被选中的行
1.先给出问题解决后的代码 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...
- CentOS 7 mini安装后安装图形界面及远程设置
安装图形界面 yum group install "GNOME Desktop" "Graphical Administration Tools" 安装 xrd ...
- Oracle批量执行SQL语句
SQLServer的场合,用";"分割SQL语句即可正常执行. Oracle的场合,会报ORA-00911错误.Oracle中需要加上begin end才正确. Dim Sql A ...
- RHEL5 yum更新源
1.检查yum是否安装 rpm -qa |grep yum 2.利用CentOS的yum更新源来实现RHEL5的YUM功能 vi /etc/yum.repos.d/CentOS-Base.repo [ ...
- 5 -- Hibernate的基本用法 --1 3 流行的ORM框架简介
⊙ JPA : JPA本身只是一种ORM规范,并不是ORM产品.它是Java EE规范制定者向开源世界学习的结果.JPA实体与Hibernate PO十分相似,甚至JPA实体完全可作为Hibernat ...
- Linux环境SVN命令行使用经验总结(转)
在windows机器上开发得差不多了之后,打包传送到开发机编译,在开发机上解决编译错误. [缺点] 浪费时间在打包解包,机器间传输代码. 在windows机器上开发之后,check in代码进分支,在 ...
- System.exit(0)会跳过finally块的执行
public class test { public static void main(String[] args) { try { System.exit(0); System.out.printl ...
- oracle nvl,having的用法
select oi.order_id,opl.payment_no,opl.back_no, oi.commit_time, oi.receive_mobile, oi.receive_user, n ...
- C++ template —— 类型区分（十一）
前面的博文介绍了模板的基础,深入模板特性,模板和设计的一些内容.从这篇开始,我们介绍一些高级模板设计,开发某些相对较小.并且互相独立的功能,而且对于这些简单功能而言,模板是最好的实现方法:(1)一个用 ...
- java的两种冒泡算法
所谓的冒泡算法,就是给数组进行排序,可以根据以小到大的顺序,也可以根据以小到大的顺序,在数组的封装类java.util.Arrays通过sort方法进行按升序的排序.那不用类的话怎么进行呢? 思路一: ...