第78天：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代碼如下：

 1 $(document).ready(function(){ 2 //code... 3 }) 等價于javascript中的 1 window.onload = function(){ 2 //code... 3 } 

window.onload()不能多次調用，jQuery的$(document).ready()方法就可以很好的解決這種問題——每次調用$(document).ready()方法都會在現有的行為上追加新的行為，這些行為函數會根據注冊的順序依次執行。例如，上面的JavaScript代碼就可以用jQuery來很好的實作：

1 function func1(){
 2   //code...
 3 }
 4 function func1(){
 5   //code...
 6 }
 7 
 8 //下面的jQuery代碼就可以順序執行上面的兩個函數，并且如果還有其他的綁onload函數也可以這樣綁定
 9 $(document).ready(function(){
10   func1();
11 });
12 $(document).ready(function(){
13   func2();
14 });      

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代碼如下：

1 <div id="container">
2   <h4 class="head">jQuery事件機制</h4>
3   <div class="content">
4     jQuery是目前使用最廣泛的javascript函數庫。據統計，全世界排名前100萬的網站，有46%使用jQuery，遠遠超過其他庫。微軟公司甚至把jQuery作為他們的官方庫。
5   </div>
6 </div>      

按照需求，需要完成以下幾個步驟：

　　（1）等待DOM裝載完畢；

　　（2）找到“标題”所在的元素，綁定click事件；

　　（3）找到“内容”元素，将“内容”顯示出來。

　　根據分析的步驟，寫出jQuery代碼如下：

1 $(function(){
2     $("#container h4.head").bind("click", function(){
3       $(this).next().show();    //擷取并顯示“内容”元素
4     })
5   })      

當然可以加強效果，并且改變綁定事件的類型，比如滑鼠懸停時顯示“内容”，滑鼠離開時隐藏“内容”。jQuery代碼如下：

1 $(function(){
2     $("#container h4.head").bind("mouseover", function(){
3       $(this).next().show();    //擷取并顯示“内容”元素
4     }).bind("mouseout", function(){
5       $(this).next().hide();
6     });
7   })      

這裡需要知道的一點是，jQuery中bind方法是可以多次調用的，并且可以簡化為将上面的第二個bind去掉。