jquery綁定事件的方法

　　Query提供了多種綁定事件的方式，每種方式各有其特點，明白了它們之間的異同點，有助于我們在寫代碼的時候進行正確的選擇，從而寫出優雅而容易維護的代碼。下面我們來看下jQuery中綁定事件的方式都有哪些。

　　jQuery中提供了四種事件監聽方式，分別是bind、live、delegate、on，對應的解除監聽的函數分別是unbind、die、undelegate、off。在開始看他們之前，先來聲明一個例子，各函數的用法將圍繞這個例子進行，

　　同時再聲明一個函數，用來作為監聽函數，JS代碼如下：

　　function getHtml（）{

　　alert（this.innerHTML）;

　　}

　　1、bind（type，［data］，function（eventObject））

　　bind是使用頻率較高的一種，作用就是在選擇到的元素上綁定特定事件類型的監聽函數，參數的含義如下：

　　type：事件類型，如click、change、mouseover等;

　　data：傳入監聽函數的參數，通過event.data取到?？蛇x;

　　function：監聽函數，可傳入event對象，這里的event是jQuery封裝的event對象，與原生的event對象有區別，使用時需要注意。

　　我們來瞄一眼bind的源碼：

　　bind： function（ types， data， fn ） {

　　return this.on（ types， null， data， fn ）;

　　}

　　可以看到內部是調用了on方法，這個on是什么樣的呢？稍后我們再看。先用我們上面的例子來試試：

　　$（‘#myol li’）.bind（‘click’，getHtml）;

　　bind的特點就是會把監聽器綁定到目標元素上，有一個綁一個，在頁面上的元素不會動態添加的時候使用它沒什么問題。但如果列表中動態增加一個“列表元素5”，點擊它是沒有反應的，必須再bind一次才行。要想不這么麻煩，我們可以使用live。

　　jQuery還有一種事件綁定的簡寫方式如a.click（function（）{}）;、a.change（function（）{}）;等，它們的作用與bind一樣，僅僅是簡寫而已。

　　2、live（type， ［data］， fn）

　　live的參數和bind一樣，它又有什么蹊蹺呢，我們還是先瞄一眼源碼：

　　live： function（ types， data， fn ） {

　　jQuery（ this.context ）.on（ types， this.selector， data， fn ）;

　　return this;

　　}

　　可以看到live方法并沒有將監聽器綁定到自己（this）身上，而是綁定到了this.context上了。這個context是什么東西呢？其實就是元素的限定范圍，看了下面的代碼就清楚了：

　　$（‘#myol li’）.context; //document

　　$（‘#myol li’，‘#myol’）.context; //document

　　$（‘#myol li’，$（‘#myol’）［0］）; //ol

　　通常情況下，我們都不會像第三種方式那樣使用選擇器，所以也就認為這個context通常就是document了，即live方法把監聽器綁定到了document上了。不把監聽器直接綁定在元素上，你是不是想起事件委托機制來了呢？若沒有，可以點擊這里回憶一下。live正是利用了事件委托機制來完成事件的監聽處理，把節點的處理委托給了document。在監聽函數中，我們可以用event.currentTarget來獲取到當前捕捉到事件的節點。下面的例子來揭曉：

　　$（‘#myol li’）.live（‘click’，getHtml）;

　　使用事件委托的優點一目了然，新添加的元素不必再綁定一次監聽器?？磥韑ive這貨還真不錯，以后拋棄bind就用它了！可以嗎？答案是否定的，而且是大大的否定。因為將監聽器綁定到了document上，所以事件的處理得等待層層冒泡，直到冒泡到根節點才開始處理，在DOM樹較深或者節點的嵌套關系很復雜時，會有意想不到的結果，根節點的負擔太重了。就像四世同堂、五世同堂，甚至八世同堂（現實中不太可能，但在HTML中層級關系可能遠比這還多），老爺子肯定記不清哪個孫子是哪個兒子的，哪個重孫又是哪個兒子的兒子的，老爺子腦子一亂，糊涂了，事情就辦錯了。為此，jQuery官方已宣布在1.7版本開始廢棄live，改用其他方式代替。所以我們也順應號召，罷用此方法。

　　正因為live存在那樣的缺點，所以我們就思考，既然老爺子負擔那么重，可不可以別把監聽器綁定在document上呢，綁定在就近的父級元素上不就好了。順應正常邏輯，delegate誕生了。

　　3、delegate（selector，type，［data］，fn）

　　參數多了一個selector，用來指定觸發事件的目標元素，監聽器將被綁定在調用此方法的元素上?？纯丛创a：

　　delegate： function（ selector， types， data， fn ） {

　　return this.on（ types， selector， data， fn ）;

　　}

　　又是調用了on，并且把selector傳給了on?？磥磉@個on真的是舉足輕重的東西。照樣先不管它?？纯词纠龋?/p>

　　$（‘#myol’）.delegate（‘li’，‘click’，getHtml）;

　　我們在例子中將監聽器綁定到ol上，event.currentTarget顯示當前捕獲到事件的元素是ol。這下，我們的選擇又多了一些靈活性，不單可以利用事件委托，還可以選擇委托的對象。畢竟老麻煩同一個人幫忙很不好嘛。對于如何選擇委托對象，還是需要一定的策略的，畢竟父級元素可以有很多。我覺得原則應該是選擇最近的“穩定”元素，選擇最近是因為事件可以更快的冒泡上去，能夠在第一時間進行處理。所謂“穩定”是指該父級元素是一開始就在頁面上的，不是動態添加上來的，而且將來也不會消失掉，這樣可以保證它可以時時監控著自己的孩子。

　　看了這么多，你是不是迫不及待想看看這個on的真實面目了呢，這就來：

　　4、on（type，［selector］，［data］，fn）

　　參數與delegate差不多但還是有細微的差別，首先type與selector換位置了，其次selector變為了可選項。交換位置的原因不好查證，應該是為了讓視覺上更舒服一些吧。

　　我們先不傳selector來看一個例子：

　　$（‘#myol li’）.on（‘click’，getHtml）;

　　可以看到event.currentTarget是li自己，與bind的效果一樣。至于傳selector進去，就是跟delegate一樣的意義了，除了參數順序不同，其他完全一樣。

　　終于看到on的真實作用了，那么，這么多的事件綁定方式，我們該如何進行選擇呢？

　　其實這個問題是完全不必糾結的，因為你已經知道他們之間的區別了不是么？根據實際情況斟酌使用就行。不過官方有一個推薦就是盡量使用on，因為其他方法都是內部調用on來完成的，直接使用on可以提高效率，而且你完全可以用on來代替其他三種寫法。至于如何代替我想就不必這么直白的寫出來了，真正理解它們的區別之后自然而然也就不是難事了。