jQuery事件綁定on()、bind()與delegate() 方法詳解

jquery中有四種事件綁定函數，bind()，live()，on()，delegate(),因爲live如今並不經常使用，所以不作過多解釋。

1. bind()用法

$("div p").bind("click",function(){
    alert("點擊");
});
同：
$("div p").click(function(){
    alert("點擊");
});

這裏爲div綁定了click事件，相應爲彈出內容，綁定簡單快捷，可是存在兩個問題：
1；用了隱式迭代方法，若是匹配的元素特別多，例如div中有多個p標籤，方法就綁定屢次，影響性能。
2；對於還沒有存在的元素沒法綁定，點擊頁面上的按鈕，將動態添加一個p元素，點擊這個p元素會發現動做沒有響應。
   用delegate方法能夠解決以上問題。

2.delegate()用法

$("div").delegate("p", "click", function () {
    alert($(this).text());
});

    這種方式採用了事件委託概念，不直接爲p元素綁定事件而是爲其父元素（或者祖先元素也可）綁定事件，當在div內點擊任意元素時，事件一層層根據event target向上冒泡，直到到達綁定事件的元素，在冒泡過程當中，若是事件的currentTarget與選擇器匹配，就會執行代碼。

    這樣就解決了bind（）的問題，不用再一個個爲p元素綁定事件，也能夠爲動態添加進來的p元素綁定，甚至若是將事件綁定到document上，不用等document準備就能夠執行綁定。不過冒泡的方式也有會存在性能問題。

 

3.on()用法

    on()將以前的綁定事件方法作了統一不管bind()仍是delegate()其實都是經過on()方法實現的，只是參數不一樣罷了。所以我在工做中用的比較多的是on()。

    on()在1.7版本以後出現。以上的代碼即可以以下來改寫：

   

$("div").on("click","p",function(){
    alert($(this).text());
})

     有綁定事件天然也有移除事件，以上的方法對應的解綁事件分別是：

   

$( "div p" ).unbind( "click", handler );
$( "div" ).undelegate( "p", "click", handler );
$( "div" ).off( "click", "p", handler );

    固然咱們能夠根據本身的須要來選用合適的方法，須要注意的是：

    1.選擇器匹配到的元素比較多時，不要用bind()迭代綁定。

    2.用id選擇器時能夠用bind()。

    3.須要給動態添加的元素綁定事件時，用delegate(),或者on()。

    4.用delegate(),和on()，dom樹不要太深。

    5.儘可能使用on()