中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久

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

JavaScript 腳本語言的執行，是需要觸發的。一般的做法就是在網頁中，直接編寫幾個函數，有的在代碼被加載的時候就被瀏覽器處理，或者使用類似下面的代碼來觸發實現函數的相關功能。

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

上面代碼的意思就是，當鼠標點擊 id 為 link 的元素的時候，就觸發了它的 onclick 事件，然后執行使用 JavaScript 定義的 fun 函數。這樣的做法肯定是很不合理的，因為觸發操作直接寫進了 HTML 結構里面，內容和行為沒有隔離開，對日后的二次開發或者修改帶來不便。

需要注意的是，當事件處理與對應元素綁定起來的時候，只有在那個元素加載完之后才能進行操作。如果說把處理的腳本放在了 head 區域，瀏覽器會報錯。因為下面的 HTML 元素還沒有加載出來，head 中的處理腳本已經被處理了。

一個好的執行 JavaScript 代碼的方法應該是 行為內容分離的、在頁面加載后處理 的。所以，處理 JavaScript 代碼我們要用到 監聽器 和 window 對象的 load 事件。

監聽器

監聽器實際上的功能就是行為與內容分離的。以前需要在 HTML 中加上一些觸發事件來觸發 JavaScript 的相關函數，而現在直接在 JavaScript 中對某個元素的使用監聽器，監聽這個元素的事件，如果這個元素被觸發了某些事件，在監聽器中又定義了這個事件對應的處理函數，那么就會處理這個函數。

W3C 的標準方法叫做 addEventListener ，被IE9，chrome，firefox，opera所支持，寫法：

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

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

window.attachEvent(‘onload',function);

使用監聽器的方法也很簡單，就是先獲取頁面中的某個元素，然后對這個元素使用監聽器，定義監聽的事件和對應的事件處理函數，就上文例子：

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

關于監聽器更加詳細的使用說明，請見文末補充資料。

window.onload 事件

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

window.onload = function(){

 //code

}

這樣，這個函數里面的 code 會在加載完成之后被處理。但是，這種方法有個缺陷，就是只能用于這一個函數。頁面中無法出現多個 window.onload 事件，如果出現了多個 onload 事件，那么后面的內容會覆蓋前面的。

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

window.onload = function(){

  func1();

  func2();

 }

function func1(){…}

function func2(){…}

這樣做雖然可以，但是很不方便，因為我們需要把所有要加載的函數名都寫進去，修改起來就會很麻煩。當然辦法肯定是有的，jQuery 就特別提供了很強大的多腳本加載方法，那么原生的 JavaScript 肯定也有辦法。

window.onload 同時處理多個函數

我們需要編寫一個處理函數，先看一下代碼：

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();

      };

    }

  }

}

簡單的來解析一下，這個自定義的 addLoadListener 函數，傳遞一個 函數名稱 作為參數。它首先判斷瀏覽器是否支持相關的 監聽器，如果支持 監聽器，就使用 監聽器 監聽 window 對象的 onload 事件，然后處理這個函數。這段代碼使用 if 語句判斷了所有瀏覽器的監聽事件，是跨瀏覽器兼容的。

我們把這段代碼放在 JavaScript 代碼段的最上面，然后在下面定義相關函數，然后使用下面語句來加載 JavaScript 函數了。

addLoadListener(func);

function func() {…}

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