javascript實現共享onload事件的方法

這篇文章將為大家詳細講解有關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);

我發現這個函數非常實用，尤其是在代碼變得越來越復雜的時候。無論打算在頁面加載完畢時執行多少個函數，只要定一條語句就可以安排好一切。

關于javascript實現共享onload事件的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。