網(wǎng)頁中，一般使用JavaScript腳本的運行需要通過事件來觸發(fā)。一般的做法就是在網(wǎng)頁中，直接編寫幾個函數(shù)，有的在代碼被加載的時候就被瀏覽器處理，或者使用類似下面的代碼來觸發(fā)實現(xiàn)函數(shù)的相關(guān)功能：

<div id="link" onclick="fun()"></div>

當鼠標點擊id為link的元素的時候，就觸發(fā)了它的onclick事件，然后執(zhí)行使用了JavaScript定義的fun函數(shù)，這樣的做法肯定是不合理的，因為觸發(fā)操作直接寫到了HTML結(jié)構(gòu)里，內(nèi)容和行為沒有隔離開。

此外，當事件處理與對應(yīng)元素綁定在一起的時候，只有那個元素在加載完之后才能進行操作。如果說把處理的腳本放在了head區(qū)域，在元素還沒有加載完成的時候，瀏覽器就會報錯，head中的處理部分HTML元素的腳本已經(jīng)被執(zhí)行了。

JavaScript正確的使用方法應(yīng)該是腳本與HTML元素分離、當頁面加載完成的時候再去執(zhí)行，本文就來講解如何使用原生JavaScript來實現(xiàn)。

使用監(jiān)聽器讓腳本與HTML元素分離

監(jiān)聽器實際上的功能是使行為和內(nèi)容進行分離的。以前需要在HTML中加上一些事件來觸發(fā)JavaScript的相關(guān)函數(shù)，而現(xiàn)在直接在JavaScript中對某個元素使用監(jiān)聽器，監(jiān)聽這個元素的事件，如果這個元素被觸發(fā)了某些事件，在監(jiān)聽器中又定義了這個事件對應(yīng)的處理函數(shù)，那么就會處理這個函數(shù)。

W3C的標準方法是addEventListener，被IE9，chrome，firefox，opera所支持，用法：

window.addEventListener('load','function',false)

早期IE中有attach方法效果類似(做ie兼用)：

window.attachEvent('onload',function)

上面這兩個監(jiān)聽器的作用：監(jiān)聽window對象，如果window對象的load（加載完成）事件被觸發(fā)，那么就執(zhí)行function這個函數(shù)。使用監(jiān)聽器的方法很簡單，就是先獲取頁面中的某個元素，然后對這個元素使用監(jiān)聽器，定義監(jiān)聽的事件和對應(yīng)的事件處理函數(shù)，例如：

document.getElementById('link').addEventListener('click',fun,false)

window.onload事件

onload事件只有在整個頁面已經(jīng)完全 載入的時候才會被觸發(fā)，將JavaScript代碼寫進onload事件中，就可以保證在HTML元素被加載完成之后，瀏覽器才會處理我們的JavaScript代碼，例如：

window.onload = function(){
  //code
}

這樣，這個函數(shù)里面的code會在函數(shù)成功加載完成之后被處理。這個方法的缺陷是只能作用一個函數(shù)。頁面中無法出現(xiàn)多個window.onload事件，如果出現(xiàn)了多個onload事件，那么后面的內(nèi)容會覆蓋掉前面的。

那么，可以在一個window.onload事件中，寫上所有需要加載的函數(shù)名，然后在外面定義函數(shù)：

window.onload = function(){ 
  func1() 
  func2()
}
function func1(){}
function func2(){}

這樣做雖然可以解決在網(wǎng)頁內(nèi)容加載完成之后執(zhí)行響應(yīng)的JavaScript代碼，雖然很不方便，因為我們要把所有需要加載的函數(shù)名都寫進去，修改起來就會很麻煩。

結(jié)合監(jiān)聽器和window.onload實現(xiàn)頁面加載完處理多個函數(shù)

這里需要提到監(jiān)視器一個優(yōu)勢：可以為一個元素上的同一個事件添加或者去除多個處理函數(shù)。前面說過window.onload事件加載的缺陷是只能在頁面使用一次。而使用監(jiān)聽器的方法，就可以監(jiān)聽為window.onload的多個函數(shù)，例如：

function addLoadListener(fn){
  if(typeof window.addEventListener != 'undefined'){
    window.addEventListener('load',fn,false)
  }else if(typeof document.addEventListener){
    document.addEventListener('load',fn,false)
  }else if(typeof window.attachEvent != 'undefined'){
    window.attachEvent('load',fn）
  }else{
    var oldfn = window.onload
    if(typeof window.onload != 'function'){
      window.onload = fn
    }else{
      window.onload = function(){
          oldfn()
          fn()
      }
    }
  }
}

這個函數(shù)使用if語句判斷了瀏覽器對監(jiān)聽器的支持情況并且分別做了處理。如果不支持監(jiān)聽器，那么就使用默認的window.onload方法加載。這個函數(shù)的使用方法也比較簡單，把它放在JavaScript最頂部，然后在下面編寫功能函數(shù)，如果需要將某個功能函數(shù)使用這個方法加載，就可以把函數(shù)名作為參數(shù)調(diào)用這個自定義的addLoadListener。代碼如下：

addListener(func)
function func(){}