[JQuery] click() bind() live() delegate()

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

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

$("a").click(function() {
   alert("hello");
});
//點擊<a>時，輸出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;
   });
   

   上述代碼中，無論是左鍵單擊還是右鍵單擊<a>輸出總是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;
   });
   

   這樣當我們左鍵單擊<a>時，輸出left；當右鍵單擊<a>時，輸出right。
   可見，一般情況下我們使用click()方法就可以了，當需要處理上述這種情況時，我們要使用bind()方法。


3. live()給所有匹配的元素附加一個事件處理函數，即使這個元素是以後再添加進來的也有效，如下：

   $("div.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&gt標籤事後面添加的，也能照常輸出success。至於原因，在這裡不做具體的說明，本篇主要比較幾種方法的區別。


4. 最後看看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()方法，其中並沒有做非常詳細的解釋，僅望能對大家在具體使用時有所幫助。

資料來源：http://www.jquery001.com/click()-bind()-live()-delegate().html