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

window.onload = EventFunction;

可是如果有兩個(gè) 事件，

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

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

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

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

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

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

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

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

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

3.如果在這個(gè)處理函數(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();
      }
    }
  }

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

addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

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

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

最新評論