事件委託和JQ事件綁定總結

事件委託：

比喻：事件委託的事例在現實當中比比皆是。好比，有三個同事預計會在週一收到快遞。爲簽收快遞，有兩種辦法：一是三我的在公司門口等快遞；二是委託給前臺MM代爲簽收。現實當中，咱們大都採用委託的方案（公司也不會容忍那麼多員工站在門口就爲了等快遞）。前臺MM收到快遞後，她會判斷收件人是誰，而後按照收件人的要求籤收，甚至代爲付款。這種方案還有一個優點，那就是即便公司裏來了新員工（無論多少），前臺MM也會在收到寄給新員工的快遞後覈實並代爲簽收。

實現原理：咱們知道，DOM在爲頁面中的每一個元素分派事件時，相應的元素通常都在事件冒泡階段處理事件。在相似 body > div > a 這樣的結構中，若是單擊a元素，click事件會從a一直冒泡到div和body（即document對象）。所以，發生在a上面的單擊事件，div和body元素一樣能夠處理。而利用事件傳播（這裏是冒泡）這個機制，就能夠實現事件委託。具體來講，事件委託就是事件目標自身不處理事件，而是把處理任務委託給其父元素或者祖先元素，甚至根元素（document）。

.bind()

假設有一個多行多列的表格，咱們想讓用戶單擊每一個單元格都能看到與其中內容相關的更多信息（好比，經過提示條）。爲此，能夠爲每一個單元格都綁定click事件：

1 $("info_table td").bind("click", function(){ /*顯示更多信息*/ } );  

問題是，若是表格中要綁定單擊事件的有10列500行，那麼查找和遍歷5000個單元格會致使腳本執行速度明顯變慢，而保存5000個td元素和相應的事件處理程序也會佔用大量內存（相似於讓每一個人親自站在門口等快遞）。

在前面這個例子的基礎上，若是咱們想實現一個簡單的相冊應用，每頁只顯示50張照片的縮略圖（50個單元格），用戶點擊「第x頁」（或「下一頁」）連接能夠經過Ajax從服務器動態加載另外50張照片。在這種狀況下，彷佛使用.bind()方法爲50個單元格綁定事件又能夠接受了。

事實卻否則。使用.bind()方法只會給第一頁中的50個單元格綁定單擊事件，動態加載的後續頁面中的單元格都不會有這個單擊事件。換句話說，.bind()只能給調用它的時候已經存在的元素綁定事件，不能給將來新增的元素綁定事件（相似於新來的員工收不到快遞）。

live()----------die()詳細解說地址
事件委託能夠解決上述兩個問題。具體到代碼上，只要用jQuery 1.3新增的.live()方法代替.bind()方法便可：

1 $("#info_table td").live("click",function(){/*顯示更多信息*/});  

到目前爲止，一切彷佛很完美。惋惜，事實並不是如此。由於.live()方法並不完美，它有以下幾個主要缺點：

1. $()函數會找到當前頁面中的全部td元素並建立jQuery對象，但在確認事件目標時卻不用這個td元素集合，而是使用選擇符表達式與event.target或其祖先元素進行比較，於是生成這個jQuery對象會形成沒必要要的開銷；
2. 默認把事件綁定到$(document)元素，若是DOM嵌套結構很深，事件冒泡經過大量祖先元素會致使性能損失；
3. 只能放在直接選擇的元素後面，不能在連綴的DOM遍歷方法後面使用，即$(「#infotable td」).live…能夠，但$(「#infotable」).find(「td」).live…不行；
4. 收集td元素並建立jQuery對象，但實際操做的倒是$(document)對象，使人費解。

解決之道
爲了不生成沒必要要的jQuery對象，可使用一種叫作「早委託」的hack，即在$(document).ready()方法外部調用.live()：

1 (function($){  
2     $("#info_table td").live("click",function(){/*顯示更多信息*/});  
3 })(jQuery); 

在此，(function($){…})(jQuery)是一個「當即執行的匿名函數」，構成了一個閉包，能夠防止命名衝突。在匿名函數內部，$參數引用jQuery對象。這個匿名函數不會等到DOM就緒就會執行。注意，使用這個hack時，腳本必須是在頁面的head元素中連接和(或)執行的。之因此選擇這個時機，由於這時候恰好document元素可用，而整個DOM還遠未生成；若是把腳本放在結束的body標籤前面，就沒有意義了，由於那時候DOM已經徹底可用了。

爲了不事件冒泡形成的性能損失，jQuery從1.4開始支持在使用.live()方法時配合使用一個上下文參數：

1 $("td",$("#info_table")[0]).live("click",function(){/*顯示更多信息*/});  

 

delegate()    仔細講解連接

如前所述，爲了突破單一.bind()方法的侷限性，實現事件委託，jQuery 1.3引入了.live()方法。後來，爲解決「事件傳播鏈」過長的問題，jQuery 1.4又支持爲.live()方法指定上下文對象。而爲了解決無謂生成元素集合的問題，jQuery 1.4.2乾脆直接引入了一個新方法.delegate()。

使用.delegate()，前面的例子能夠這樣寫：

1 $("#info_table").delegate("td","click",function(){/*顯示更多信息*/});

使用.delegate()有以下優勢（或者說解決了.live()方法的以下問題）：

• 直接將目標元素選擇符（」td」）、事件（」click」）及處理程序與「受拖方」$(「#info_table」)綁定，不額外收集元素、事件傳播路徑縮短、語義明確；
• 支持在連綴的DOM遍歷方法後面調用，即支持$(「table」).find(「#info」).delegate…，支持精確控制；

可見，.delegate()方法是一個相對完美的解決方案。但在DOM結構簡單的狀況下，也可使用.live()。

提示：使用事件委託時，若是註冊到目標元素上的其餘事件處理程序使用.stopPropagation()阻止了事件傳播，那麼事件委託就會失效。

 

one()詳細講解地址

one() 方法爲被選元素附加一個或多個事件處理程序，並規定當事件發生時運行的函數。

當使用 one() 方法時，每一個元素只能運行一次事件處理器函數。

toggle()

toggle()方法用於綁定兩個或多個事件處理器函數，以響應被選元素的輪流的 click 事件。

trigger()

方法觸發被選元素的指定事件類型。

與 trigger() 方法相比的不一樣之處

• 它不會引發事件（好比表單提交）的默認行爲
• .trigger() 會操做 jQuery 對象匹配的全部元素，而 .triggerHandler() 隻影響第一個匹配元素。
• 由 .triggerHandler() 建立的事件不會在 DOM 樹中冒泡；若是目標元素不直接處理它們，則不會發生任何事情。
• 該方法的返回的是事件處理函數的返回值，而不是具備可鏈性的 jQuery 對象。此外，若是沒有處理程序被觸發，則這個方法返回 undefined。

 

另：事件源

IE下 event.srcElement

FF下 event.Target

 

原文

另外一篇連接