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應該有一個比較基本的了解了，當然由於本人水平有限，所以講解的不是很透徹還請各位看官多多包含！
本文由 平凡公子原創並首次發布，歡迎轉載（轉載請注明作者及本文地址）！