原生javascript 共享onload事件

在工做時，咱們給一個元素綁定了事件，若是dom還沒加載完成，就執行了js代碼，就不會綁定成功。常規解決方案就是用：

window.onload = EventFunction;

但是若是有兩個 事件，

window.onload = EventFunction1;

window.onload = EventFunction2;

那2就會將1取代，這時你可能會想：每一個事件處理板書只能綁定一條指令。有一種辦法可讓咱們避開這一難題：能夠先建立一個匿名函數來容納這兩個函數，而後把那個匿名函數綁定到onload事件上，以下所示：

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

它確實能很好地工做————在須要綁定的函數不是不少的場合，這應該是最簡單的解決方案了。

這裏還有一個彈性最佳的解決方案——無論你打算頁面加載完畢時執行多少個函數，它均可以應付自如。這個方案須要額外編寫一些代碼，把函數綁定到window.onload事件就很是易行了。

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

下面是此函數要完成的操做：

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

2.若是在這個處理函數上尚未綁定任何函數，就像平時那樣把新函數添加給它；

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

    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);

我發現這個函數很是實用，尤爲是在代碼變得愈來愈複雜的時候。不管打算在頁面加載完畢時執行多少個函數，只要定一條語句就能夠安排好一切。