jQuery事件繫結與事件委託

在jquery類庫中，事件繫結與事件委託的用法受到了廣泛的關注。不僅如此，這還成了當今前端攻城獅的

熱門面試題目。十次面試有七八次會問到這個問題，因此，了解掌握事件的繫結和委託，還是比較重要的。

冒泡

眾所周知，html的dom結構自外而內，層層包裹。如：div>p>span>a，這樣式的，當我們的事件定義

到最裡面的a標籤上時，由於冒泡的特定，如果在外層如div,p,span上也定義了相同事件的話，a標籤上的事件執行時，外層事件也會同樣被執行。而當外層定義了事件，觸發a標籤時，外層事件同樣也會被執行，這就是冒泡的特性，事件總會沿著從裡到外執行。

事件繫結

事件繫結，即為乙個標籤繫結相應的事件，當這個事件觸發時，就會執行事件中的方法。我們會為每乙個元素繫結乙個事件。

事件委託

在事件繫結中，我們可以為每乙個元素繫結一次事件。但目前來看，html頁面之複雜，頁面中可能會存在成百上千個元素，如果我們為每乙個元素繫結事件的話，勢必影響效能。不僅如此，還有很多元素是動態生成的，我們如果用事件繫結的話，這些動態生成的元素將不會有相應的事件繫結，因為乙個缺點：事件繫結只能給所有存在的元素上繫結事件。我們可以看到乙個特性：如果在外層元素上繫結事件，那麼即使事件發生在此元素內部子元素上，也會通過冒泡使外層元素的事件執行。那麼，如果我們本意是給子元素繫結事件，但是由於子元素太多又或者子元素是動態載入，為了效能不能直接繫結的話，我們將事件定義到外層元素上，子元素只需要觸發事件，通過冒泡，自然而然的觸發外層元素事件執行，這樣就可以解決事件繫結的缺點問題。這個，就是我們所說的事件委託。

bind()方法

在jquery中我們有乙個bind()方法，從字面意思可以看出，他是給元素繫結事件的，

$("table td").bind("click",function
());

bind()方法用起來簡單方便，但是非常的消耗效能，如果需要找到指定的td元素，則需要遍歷，當td數量相當龐大時，效能消耗非常大。不僅如此，如果td元素是動態載入的話，bind()方法是不能繫結到這些動態載入的元素上的。

live()方法

live()方法在最新的jquery版本中已經被廢棄，因為他缺點多，但我們在這裡還要說一說這個live()方法。

$("table td").live("click",function
())

其用法與繫結基本相同，但是有很多缺點：

1 儘管他是要在("

tabl

etd"

)某乙個

tabl

e下檢索

td元素

來繫結事

件，但是

他還是會

將事件綁

定到(document)物件，這樣，如果dom結構層次夠多夠深的話，不僅效能慢，而且還會造成不必要的後果。

2 不僅如此，事件被繫結到$(document)上之後，live()事件會檢索所有的td元素，並對其進行事件繫結，這與我們的初衷是不一樣的。

3 live()事件不能在**鏈後使用：

$(".class td").live("click",function
()); //這樣寫正確
$(".class").find("td").live("click",function
()); //這樣寫不行

使用live()方法勢必會產生很多jquery()物件，為了避免這個發生，我們需要在$(document).ready(function(){});之外執行，也是為了避免汙染明明控制項，我們選擇用乙個自己執行函式來執行這句**：

(function
($))
; })
(jquery)
;

更嚴重的是，這句話，必須要放在header 引用或header裡執行才起到作用。

為了避免live()方法繫結到$(document)上，我們可以給他的jquery物件傳乙個引數：

$(".class td",$(".somediv")).live("click",function
())

這樣，會在$(「.somediv」)下遍歷找到相應的元素再進行方法的繫結。

delegate()方法

live()方法使用麻煩，還有一定的侷限性，因此jquery最新版本已經廢棄了它。delegate()方法可以解決bind()方法和live()方法中遇到的所有的問題：

$(".class").delegate("td","click",function
());

delegate()方法簡潔明瞭，可以很快將委託方，事件，函式，及受委託方繫結在一起。

在.class元素上繫結乙個click方法，如果.class元素中的某乙個td發生了click事件，那麼這個方法就會被執行。不僅如此，動態載入的td元素也可以觸發該方法了。

on()方法

從jquery原始碼可以看到，bind(),delagate()方法都是有on()方法生成的。因此目前普遍使用on()方法進行事件繫結和事件委託：

$(".class td").on("click",function
());
$(".class").on("click","td",function
());

on()方法中，如果event事件後沒有selector得話，那就是普通的事件繫結，就是給jquery物件繫結乙個click方法。如果event事件後有selector的話，那麼就是時間委託了。jquery物件就是受委託方，seletor就是委託方，給jquery物件繫結事件，如果觸發時間的是委託方，那麼事件就會被執行。

總結來說，目前使用on()方法既可以實現事件繫結，也可以實現事件委託，是比較好用的方法。其他幾個方法應用的比較少，限制又多。因此on()方法用來解決事件委託與繫結的問題還是比較熱門的。

jQuery事件繫結與事件委託

事件繫結與事件委託

jQuery 事件冒泡與事件委託

jQuery普通繫結事件和on委託事件對比

jQuery事件繫結與事件委託

事件繫結與事件委託

jQuery 事件冒泡與事件委託

jQuery普通繫結事件和on委託事件對比

相關推薦