在工作時，我們給一個元素綁定了事件，如果dom還沒加載完成，就執(zhí)行了js代碼，就不會綁定成功。常規(guī)解決方案就是用：

window.onload = EventFunction;

可是如果有兩個 事件，

• window.onload = EventFunction1;
• window.onload = EventFunction2;

那2就會將1取代，這時你可能會想：每個事件處理板書只能綁定一條指令。有一種辦法可以讓我們避開這一難題：可以先創(chuàng)建一個匿名函數(shù)來容納這兩個函數(shù)，然后把那個匿名函數(shù)綁定到onload事件上，如下所示：

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

它確實能很好地工作————在需要綁定的函數(shù)不是很多的場合，這應該是最簡單的解決方案了。

這里還有一個彈性最佳的解決方案——不管你打算頁面加載完畢時執(zhí)行多少個函數(shù)，它都可以應付自如。這個方案需要額外編寫一些代碼，把函數(shù)綁定到window.onload事件就非常易行了。

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

下面是此函數(shù)要完成的操作：

1.把現(xiàn)有的 window.onload 事件處理函數(shù)的值存入變量 oldonload;

2.如果在這個處理函數(shù)上還沒有綁定任何函數(shù)，就像平時那樣把新函數(shù)添加給它；

3.如果在這個處理函數(shù)上已經(jīng)綁定了一些函數(shù)，就把新函數(shù)追加到現(xiàn)有指令的末尾。

function addLoadEvent(func) {
    var oldonload = window.onload;
    if(typeof window.onload != 'function'){
      window.onload = func;
    }else{
      window.onload = function(){
        oldonload();
        func();
      }
    }
  }

這將把那些在頁面加載完畢時執(zhí)行的函數(shù)創(chuàng)建為一個隊列。如果想把剛才那兩個函數(shù)添加到隊列里去，只需要寫出以下代碼就行了：

addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論