onload事件是HTML DOM Event 對象的一個屬性,又叫事件句柄(Event Handlers),它會在頁面或圖像加載完成后(注意是加載完成后)立即發生。
window.onload = func的作用就是在頁面加載完成后將func函數綁定到onload事件上並執行。如果頁面加載完成之后,只需要執行一個函數func,那么只用window.onload = func也就可以了,但是如果需要執行兩個甚至多個函數呢?
直接調用兩次onload不就行了:
window.onload=firstfunction;
window.onload=secondfunction;
這么做的話,只有secondfunction會被綁定,因為前面的值被后面的值覆蓋了。那么該怎么辦?
將兩個函數合並到一個函數當中不就行了,匿名函數發揮作用的時候到了:
window.onload = function() { fristfunction; secondfunction; }
不過,它也只能綁定兩個函數。還好,大神們早已解決了這個問題。西蒙·威利森 (Simon Willison)——jQuery框架的開發者之一編寫了下面的addLoadEvent函數:
function addLoadEvent(func) { var oldonload = window.onload;//將現有的事件處理函數的值存入變量中 if (typeof window.onload != 'function') { window.onload = func;//如果這個事件處理函數沒有綁定任何函數,就把新函數添加給它 } else { window.onload = function() { oldonload(); func();//如果已經綁定了函數,就把新函數追加到現有指令的末尾 } } }
然后,不管頁面加載完成后要執行多少個函數,只要調用這個函數就可以了:
addLoadEvent(firstfunction);
addLoadEvent(secondfunction);
addLoadEvent(thirdfunction);
...
附:相關概念
1 支持onload事件的 HTML 標簽有<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
支持該事件的 JavaScript 對象有image(圖像), layer, window(整個頁面)
2 事件句柄(Event Handlers),可以在某個事件發生時通過一個事件句柄對某個元素進行操作。
事件是可以被控件識別的操作,如按下確定按鈕,選擇某個單選按鈕或者復選框。每一種控件有自己可以識別的事件,如窗體的加載、單擊、雙擊等事件,編輯框(文本框)的文本改變事件,等等。
3 HTML DOM Event 對象代表事件的狀態,比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態等。事件通常與函數結合使用,函數不會在事件發生前被執行(這句很重要)。
參考資料:
JavaScript DOM編程藝術 by Jeremy Keith
HTML DOM Event 對象
事件