jQuery實現(xiàn)事件代理

1.事件代理的原理和意義

實現(xiàn)原理是利用了瀏覽器的事件冒泡和事件源（target）。
在js中事件會冒泡到父級節(jié)點，所以我們可以在父級節(jié)點進行事件代理。例如一個使用jQuery的函數(shù)：

 $("#tab td").click(function(){
           $(this).css("background","red");
}) ;

上面的函數(shù)給一個tab的td加了一個單擊事件，但是如果表格1000行，就得綁定1000次，

$("#tab").bind("click",function(ev)){
   var $obj=$(ev.target);
   $obj.css("background","red");
}

以上用bind函數(shù)將click綁定到了tab上，從而實現(xiàn)事件代理。

2.jQuery中的綁定函數(shù)

(1).bind()為每個匹配元素的特定事件綁定事件處理函數(shù)

$("#niu").bind('click',function(){
  alert("hello niuniu");
});

此代碼把id為niu的元素響應事件click，并顯示警報。使用bind綁定多個事件時，可以這樣

$("#niu").bind('mouseenter mouseleava',function(){
      $(this).css("background","yellow");
});

$("#foo").bind({
     click:function(){
     },
     mouseenter:function(){
     }
});

(2).delegate()指定的元素（屬于被選元素的子元素）添加一個或多個事件處理程序，并規(guī)定當這些事件發(fā)生時運行的函數(shù)

$("table").delegate("td","click",function(){
    $(this).toggleClass("chosen");
});

(3).on在選擇元素上綁定一個或多個事件的事件處理函數(shù)

function greet(event) { alert("Hello"+event.data.name); }
$("button").on("click", { name: "Karl" }, greet);
$("button").on("click", { name: "Addy" }, greet);

(4).live給所有匹配的元素附加一個事件處理函數(shù)，即使這個元素是以后再添加進來的

$("a").live("click", function() { return false; })

以上是常用的綁定函數(shù)。

技術文檔引用：

  自從.live()方法處理事件一旦傳播到文檔的頂部，live事件是不可能停止傳播的。同樣地，.delegate() 事件將始終傳播給其中包含的被委托元素；同時，任何在 DOM 樹中，比這些元素低的元素上綁定的相同事件，在 .delegate() 事件被調用的時候，也會被觸發(fā)。因此，如果要在事件中阻止委托事件被觸發(fā)，可以調用event.stopPropagation()或者返回false防止委派處理程序冒泡。

簡單來說，.bind()是直接綁定在元素上，而.live()和.delegate()則是通過冒泡的方式來綁定到元素上的。.bind()方法只能給當前存在的元素綁定事件，對于事后采用JS方式新生成的元素無效，而live方法可以對后生成的元素也可以綁定相應的事件。