把多個JavaScript函數綁定到onload事件處理函數上的方法_javascript技巧

為了讓函數只在頁面載入完畢後才得到執行，我們會把函數綁定到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事件處理函數上的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援雲棲社區。