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应该有一个比较基本的了解了，当然由于本人水平有限，所以讲解的不是很透彻还请各位看官多多包含！
本文由 平凡公子原创并首次发布，欢迎转载（转载请注明作者及本文地址）！