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去掉。