之前用過一些jQuery的動畫和特效，但是用到的部分也不超過10%的樣子，感覺好浪費啊——當然浪費的不是jQuery，而是Web資源。後來就想深入研究下jQuery的內部機理，讀過兩遍jQuery源代碼，但是自覺還差的好遠，跟好多大神的理解還是有很大差距。現在就一點一點積累自己的知識體系，記錄自己學到的和自己所理解的jQuery。
JavaScript和HTML之間的交互式通過用戶和浏覽器操作頁面時引發的事件機制來處理的。當文檔或者它的某些元素發生某些變化或操作時，浏覽器就會自動生成一個事件。當然使用傳統的JavaScript也能完成這些交互，但是jQuery增加兵擴展了基本的事件處理機制。jQuery不僅提供了更加優雅的事件處理語法，而且極大的增強了事件處理能力。
一、jQuery中的事件
1、加載DOM：
執行時機：在常規的JavaScript中，通常使用window.onload方法，而在jQuery中，使用的是$(document).ready()方法，通過使用此方法，可以在DOM載入就緒時就對其進行操縱兵調用執行它所綁定的函數。
注意以上兩種方法的區別：
window.onload方法是在網頁中所有的元素（包括元素的所有關聯文件）完全加載到浏覽器後才執行，也即在此時JavaScript才可以訪問網頁中的任何元素；
$(document).ready()方法注冊的事件處理程序，在DOM完全就緒時就可以被調用，也即此時網頁的所有元素對jQuery都是可以訪問的，但是並不是這些元素關聯的文件都已經下載完畢。
根據上述描述，顯然使用jQuery的$(docum).ready()方法時會出現一個問題。由於在該方法內注冊的事件，只要DOM就緒就會被執行，因此可能此時元素的關聯文件未下載晚。例如與圖片相關的HTML下載完畢，並且已經解析為DOM樹了，但是很有可能圖片還未完全加載，所以例如圖片的高度和寬度等屬性就不一定有效。
要解決這個問題，可以使用jQuery中的另一個關於頁面加載的方法——load()方法。load()方法會在元素的onload事件中綁定一個處理函數。如果處理函數綁定給window對象，則會在所有的內容（包括窗口、框架、對象和圖像等）加載完畢後觸發，出國處理函數綁定在元素上，則會在元素的內容加載完畢後觸發。
jQuery代碼如下：
$(window).load(function(){
//code...
})
等價於JavaScript中的以下代碼：
window.onload = function(){
//code...
}
多次調用：
window.onload方法是不能被多次調用的，因為JavaScript的onload事件一次只能保存對一個函數的引用，它會自動用後面的函數覆蓋前面的函數，所以即使將上面代碼中的window.load賦值兩次，也只會執行後面的函數。所以如果想達到兩個函數順序觸發的效果，只能使用下面的方法來實現——也即再創建一個新的JavaScript方法，JavaScript代碼如下：
window.load = function(){
func1();
func2();
}
這種寫法是可以解決一些問題的，但是如果有多個JavaScript文件，或者在團隊開發中，每個文件都需要用到window.onload方法，這種情況下還用這種方法就非常麻煩了。
jQuery的$(document).ready()方法就可以很好的解決這種問題——每次調用$(document).ready()方法都會在現有的行為上追加新的行為，這些行為函數會根據注冊的順序依次執行。例如，上面的JavaScript代碼就可以用jQuery來很好的實現：
function func1(){
//code...
}
function func1(){
//code...
}
//下面的jQuery代碼就可以順序執行上面的兩個函數，並且如果還有其他的綁onload函數也可以這樣綁定
$(document).ready(function(){
func1();
});
$(document).ready(function(){
func2();
});
簡寫方式：幾種等價的書寫方式：
$(document).ready(function(){
//code...
})
$(function(){
//code...
})
//默認參數是document
$().ready(fucntion(){
//code...
})
2、事件綁定：文檔裝載完成了，接著就是為元素綁定事件來完成某些操作了，所使用的是bind()方法。bind()方法的調用格式為：
bind(type, [data], fn);
其中type是事件類型，包括：click，keypress，load，submit，dblclick，keydown，change，resize，mouseenter，keyup，scroll，focus，mouseleave，blur，unload等，也可以是自定義事件名稱。第二個參數是可選參數，作為event.data屬性值傳遞給事件對象的額外數據對象。第三個參數則是用來綁定的處理函數。舉個實際的例子，下面網頁中，單擊“標題”鏈接將顯示內容。
HTML代碼如下：
<div id="container">
<h4 class="head">jQuery事件機制</h4>
<div class="content">
jQuery是目前使用最廣泛的javascript函數庫。據統計，全世界排名前100萬的網站，有46%使用jQuery，遠遠超過其他庫。微軟公司甚至把jQuery作為他們的官方庫。
</div>
</div>
按照需求，需要完成以下幾個步驟：
（1）等待DOM裝載完畢；
（2）找到“標題”所在的元素，綁定click事件；
（3）找到“內容”元素，將“內容”顯示出來。
根據分析的步驟，寫出jQuery代碼如下：
$(function(){
$("#container h4.head").bind("click", function(){
$(this).next().show(); //獲取並顯示“內容”元素
})
})
當然可以加強效果，並且改變綁定事件的類型，比如鼠標懸停時顯示“內容”，鼠標離開時隱藏“內容”。jQuery代碼如下：
$(function(){
$("#container h4.head").bind("mouseover", function(){
$(this).next().show(); //獲取並顯示“內容”元素
}).bind("mouseout", function(){
$(this).next().hide();
});
})
這裡需要知道的一點是，jQuery中bind方法是可以多次調用的，並且可以簡化為將上面的第二個bind去掉。
下一頁繼續完成jQuery事件的下半部分，包括的內容有合成事件、事件冒泡、移除事件等內容。
更多詳情見請繼續閱讀下一頁的精彩內容： http://www.linuxidc.com/Linux/2016-10/136303p2.htm
