Query中click(),bind(),live(),delegate()的區別_jquery

click()，bind()，live()都是執行事件時使用的方法，他們之前是有一些區別的，我們在使用這些方法時應該根據需要進行選擇。

1.click()方法是我們經常使用的單擊事件方法：

複製代碼 程式碼如下:

$("a").click(function(){
   alert("hello");
});
   alert("hello");

});

當點選時，輸出hello。 2.click()方法是bind()方法的簡單方法。在bind()中，jQuery所有JavaScript事件對象，例如focus, mouseover, 和 resize，都是可以作為type參數傳遞進來的。

我們直接看看jQuery文件中的一個例子：複製程式碼

程式碼如下:



程式碼如下:



程式碼如下:

var message = "left";
$("a").bind("click", function() {
   alert(message);

   return false;} );var message = "right";$("a").bind("contextmenu", function() {   alert(message);   return false;});

上邊程式碼中，無論是左鍵點選或右鍵點選輸出總是"right"。為了解決這個問題，我們可以將message作為data參數傳遞到bind()方法中，如下：




複製程式碼


程式碼如下:


var message = "left";

$("a").bind("click", { msg: message }, function(e) {
   alert( e.data.msg);

   return false;

});var

 message = "right";

$("a").bind("contextmenu", { msg: message } , function(e) {   alert(e.data.msg);   return false;});

這樣當我們左鍵點選時，輸出"left"；當右鍵單擊時，輸出"right"。 可見，一般情況下我們使用click()方法就可以了，當需要處理上邊這種情況時，我們要使用bind()方法。 3.live()為所有符合的元素附加一個事件處理函數，即使這個元素是以後再加入進來的也有效。

.live").bind("click", function() {
   alert("success");
});

此時，點擊class為live的div時，輸出"success"。此時如果有一個新的元素加入了進來，如下：

複製程式碼 程式碼如下:

$("

live

").appendTo("body");

這時，當使用上邊方法點擊class為live的a標籤時，不會執行。原因在於，這個元素是在呼叫bind()之後加入的，而使用live()方法使得後邊新增的元素也能夠執行對應的事件，如下：

複製程式碼 程式碼如下:

$("div.live").live("click", function() {
   alert("success ");
});

這樣，當我們點選class為live的a標籤時，如果此a標籤是後邊新增的，也能照常輸出"success"。至於原因，這裡不做具體的說明，本篇主要比較幾種方法的差異。

最後，看看delegate()方法，這個方法到目前為止我自己還沒有使用過，應該是在1.4.2中才有的。
live()方法的一個不足在於它不支持鍊式寫法：

複製代碼程式碼如下:

$("#test").children("a").live("mouseover", function() {
    alert("hello");
});


上邊這種寫法並不會輸出，我們使用delegate()可以寫成：

複製程式碼 程式碼如下:

$("#test").delegate("a", "mouseover", function() {
    alert("hello");
});

這樣就可以正常的輸出我們想要的結果了。這篇總結了click()、bind()、live()和delegate()方法，其中並沒有做非常詳細的解釋，僅望能對大家在具體使用時有所幫助。