DIV CSS 佈局教程網

為了讓函數只在頁面加載完畢後才得到執行，我們會把函數綁定到onload事件上：

window.onload = userFunction

但如果有兩個函數：firstFunction() 和 secondFunction()，都想讓它們在頁面加載完畢後得到執行，該怎麼辦？如果這樣：

window.onload = firstFunciton;
window.onload = secondFunction;

只有最後一個函數能被執行。由此可得：每個事件處理函數只能綁定一條指令。

但我們可以這樣做：

   window.onload = function(){
     firstFunction();
     secondFunction();
   }

這是一個解決辦法。

不過，還有一個更通的解決方案——額外編寫一些代碼，但好好處是，有了這些代碼，把函數，不管它們有多少，綁定到window.onload事件上的工作就非常簡明易行了。

這個函數的的名字是addLoadEvent，它是由Simon Willison編寫的。它只有一個參數：打算在頁面加載完畢時執行的函數的名字。

下面是addLoadEvent()函數將要完成的操作：

1. 把現有的window.onload事件處理函數的值存入變量oldonload。

2. 如果在這個處理函數上還沒有綁定任何函數，就像平時那樣把形函數添加給它。

3. 如果在這個處理函數上已經綁定了一些函數，就把形函數追加到現有指令的末尾。

下面是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);

以上這篇把多個JavaScript函數綁定到onload事件處理函數上的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。