本文實例講述了JQuery中DOM載入與事件執行原理。分享給大家供大家參考。具體分析如下：
JavaScript和HTML之間的互動是透過使用者和瀏覽器操作頁面時引發的事件來處理的。當文件或它的某些元素發生某些變化或操作時，瀏覽器會自動產生一個事件。例如瀏覽器載入完一個文件後，會產生事件：當使用者點選某個按鈕時，也會產生事件。雖然利用傳統的JavaScript事件能完成這些交互，但jQuery增加並擴展了基本的事件處理機制。 jQuery不僅提供了更優雅的事件處理語法，而且大大增強了事件處理能力。
以瀏覽器裝載文件為例，在頁面載入完畢後，瀏覽器會透過JavaScript為DOM元素新增事件。在常規的JavaScript程式碼中，通常使用window.onload方法，而在jQuery中，使用的是$(document).ready()方法。 $(document).ready()方法是事件模組中最重要的函數，可以大幅提高Web應用程式的反應速度。 jQuery就是用$(document).ready()方法來取代傳統JavaScript的window.onload方法的。透過使用此方法，可以在DOM載入就緒時就對其進行操縱並呼叫執行它所綁定的函數。在使用過程中，需要注意$(document).ready()方法和window.onload方法之間的細微差別。
執行時機
$(document).ready()方法和window.onload方法有相似的功能，但是在執行時機上是有區別的。 window.onload方法是在網頁中所有的元素（包括元素的所有關聯檔案）完全載入到瀏覽器後才執行，也就是JavaScript此時才可以存取網頁中的任何元素。而透過jQuery中的$(document).ready()方法註冊的事件處理程序，在DOM完全就緒時就可以被呼叫。此時，網頁的所有元素對jQuery而言都是可以存取的，但是，這並不意味著這些元素關聯的檔案都已經下載完畢。
舉一個例子，有一個大型的圖庫網站，為網頁中所有圖片添加某些行為，例如單擊圖片後讓它隱藏或顯示。如果使用window.onload方法來處理，那麼使用者必須等劍每一幅圖片都載入完畢後，才可以進行操作。如果使用jQuery中的$(document).ready()方法來進行設置，只要DOM就緒就可以操作了，不需要等待所有圖片下載完畢。顯然，把網頁解析為DOM樹的速度比把頁面中的所有關聯文件加載完畢的速度快很多。
另外，需要注意一點，由於在$(document).ready()方法內註冊的事件，只要DOM就緒就會被執行，因此可能此時元素的關聯文件末下載完。例如與圖片有關的HTML下載完畢，並且已經解析為DOM樹了，但很有可能圖片還未加載完畢，所以例如圖片的高度和寬度這樣的屬性此時不一定有效。要解決這個問題，可以使用jQuery中另一個關於頁面載入的方法－load()方法。 load()方法會在元素的onload事件中綁定一個處理函數。如果處理函數綁定給window對象，則會在所有內容（包括視窗、框架、物件和圖像等）載入完畢後觸發，如果處理函數綁定在元素上，則會在元素的內容載入完畢後觸發。 jQuery程式碼如下：
$(window).load(function(){
// 编写代码
})等價於JavaScript中的以下程式碼：
window.onload = function(){
// 编写代码
})
現在詳細講解下windows.onload方法和$(document).ready()方法的差異：
假設網頁中有兩個函數，JavaScript程式碼如下：
function one(){
alert("one");
}
function two(){
alert ("two");
}
當網頁載入後，透過以下JavaScript程式碼分別呼叫one函數和two函數：
window.onload = one; window.onload = two;
然而當執行程式碼後，發現只彈出字串「two」對話框。字串「one」對話方塊不能被彈出的原因是JavaScript的onload事件一次只能儲存一個函數的引用，它會自動用後面的函數覆蓋前面的函數，因此不能在現有的行為上添加新的行為。
為了達到兩個函數順序觸發的效果，只能再建立一個新的JavaScript方法來實現，Javascript程式碼如下：
window.onload = function(){
one();
two();
}
雖然這樣寫程式碼能解決某些問題，但還是不能滿足某些需求，例如有多個JavaScript文件，每個文件都需要用到window.onload方法，這種情況下用上面提到的方法編寫程式碼會非常麻煩。而jQuery的$(document).ready()方法能夠很好地處理這些情況，每次調用$(document).ready()方法都會在現有的行為上追加新的行為，這些行為函數會根據註冊的順序依序執行。例如如下jQuery程式碼：
function one(){
alert("one");
}
function two(){
alert("two");
}
$(document).ready(function(){
one();
})
$(document).ready(function(){
two();
});
运行代码后，会先弹出字符串“one”对话框，然后弹出字符串“two”对话框。
下面看看ready()与onload()的耗时：
jQuery的ready()耗时 : 498 ms
简写方式
上面我们ready函数写成这样：
$(document).ready(function(){
// 编写代码
})
也可以简写成这样：
$(function(){
// 编写代码
})
另外，$(document)也可以简写为$()。当$()不带参数时，默认参数就是“document”，因此可以简写为：
$().ready(function(){
// 编写代码
})
3种方式都是一样的功能，读者可以根据自己的喜好，选择其中的一种。
希望本文所述对大家的jQuery程序设计有所帮助。
