這篇文章主要介紹了JavaScript判斷頁(yè)面加載完之后再執(zhí)行預(yù)定函數(shù)的技巧,原理還是利用監(jiān)聽器監(jiān)聽元素事件、被觸發(fā)則執(zhí)行函數(shù),需要的朋友可以參考下

JavaScript 腳本語(yǔ)言的執(zhí)行，是需要觸發(fā)的。一般的做法就是在網(wǎng)頁(yè)中，直接編寫幾個(gè)函數(shù)，有的在代碼被加載的時(shí)候就被瀏覽器處理，或者使用類似下面的代碼來(lái)觸發(fā)實(shí)現(xiàn)函數(shù)的相關(guān)功能。

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

上面代碼的意思就是，當(dāng)鼠標(biāo)點(diǎn)擊 id 為 link 的元素的時(shí)候，就觸發(fā)了它的 onclick 事件，然后執(zhí)行使用 JavaScript 定義的 fun 函數(shù)。這樣的做法肯定是很不合理的，因?yàn)橛|發(fā)操作直接寫進(jìn)了 HTML 結(jié)構(gòu)里面，內(nèi)容和行為沒有隔離開，對(duì)日后的二次開發(fā)或者修改帶來(lái)不便。

需要注意的是，當(dāng)事件處理與對(duì)應(yīng)元素綁定起來(lái)的時(shí)候，只有在那個(gè)元素加載完之后才能進(jìn)行操作。如果說(shuō)把處理的腳本放在了 head 區(qū)域，瀏覽器會(huì)報(bào)錯(cuò)。因?yàn)橄旅娴?HTML 元素還沒有加載出來(lái)，head 中的處理腳本已經(jīng)被處理了。

一個(gè)好的執(zhí)行 JavaScript 代碼的方法應(yīng)該是 行為內(nèi)容分離的、在頁(yè)面加載后處理 的。所以，處理 JavaScript 代碼我們要用到 監(jiān)聽器 和 window 對(duì)象的 load 事件。

監(jiān)聽器

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

W3C 的標(biāo)準(zhǔn)方法叫做 addEventListener ，被IE9，chrome，firefox，opera所支持，寫法：

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

早期 IE 中有 attachEvent 方法效果類似：

window.attachEvent(‘onload',function);

使用監(jiān)聽器的方法也很簡(jiǎn)單，就是先獲取頁(yè)面中的某個(gè)元素，然后對(duì)這個(gè)元素使用監(jiān)聽器，定義監(jiān)聽的事件和對(duì)應(yīng)的事件處理函數(shù)，就上文例子：

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

關(guān)于監(jiān)聽器更加詳細(xì)的使用說(shuō)明，請(qǐng)見文末補(bǔ)充資料。

window.onload 事件

onload 事件只有在整個(gè)頁(yè)面已經(jīng)完全載入的時(shí)候才會(huì)被觸發(fā)，我們將 JavaScript 代碼寫進(jìn) onload 事件中，就可以保證在 HTML 元素被加載完成之后，瀏覽器才會(huì)處理我們的 JavaScript 代碼。基礎(chǔ)的寫法：

window.onload = function(){

 //code

}

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

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

window.onload = function(){

  func1();

  func2();

 }

function func1(){…}

function func2(){…}

這樣做雖然可以，但是很不方便，因?yàn)槲覀冃枰阉幸虞d的函數(shù)名都寫進(jìn)去，修改起來(lái)就會(huì)很麻煩。當(dāng)然辦法肯定是有的，jQuery 就特別提供了很強(qiáng)大的多腳本加載方法，那么原生的 JavaScript 肯定也有辦法。

window.onload 同時(shí)處理多個(gè)函數(shù)

我們需要編寫一個(gè)處理函數(shù)，先看一下代碼：

function addLoadListener(fn){

  if (typeof window.addEventListener != ‘undefined'){

    window.addEventListener(‘load',fn,false);

  }else if(typeof document.addEventListener != ‘undefined'){

    document.addEventListener(‘load',fn,false);

  }else if (typeof window.attachEvent != ‘undefined'){

    window.attachEvent(‘onload',fn);

  }else{

    var oldfn = window.onload;

    if(typeof window.onload != ‘function'){

      window.onload = fn;

    }else{

      window.onload = function(){

        oldfn();

        fn();

      };

    }

  }

}

簡(jiǎn)單的來(lái)解析一下，這個(gè)自定義的 addLoadListener 函數(shù)，傳遞一個(gè) 函數(shù)名稱 作為參數(shù)。它首先判斷瀏覽器是否支持相關(guān)的 監(jiān)聽器，如果支持 監(jiān)聽器，就使用 監(jiān)聽器 監(jiān)聽 window 對(duì)象的 onload 事件，然后處理這個(gè)函數(shù)。這段代碼使用 if 語(yǔ)句判斷了所有瀏覽器的監(jiān)聽事件，是跨瀏覽器兼容的。

我們把這段代碼放在 JavaScript 代碼段的最上面，然后在下面定義相關(guān)函數(shù)，然后使用下面語(yǔ)句來(lái)加載 JavaScript 函數(shù)了。

addLoadListener(func);

function func() {…}

這樣，有什么 JavaScript 函數(shù)是需要在頁(yè)面加載完成之后處理的，直接使用 addLoadListener 函數(shù)即可，而且可以使用多個(gè)。通常來(lái)說(shuō)，所有的 JavaScript 最好都使用 onload 事件加載，以避免意外情況發(fā)生。