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 事件加載,以避免意外情況發生。