jquery事件綁定 on() bind() live() delegate()

on()方法

    在被選元素及子元素上添加一個或多個事件處理程序

    自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。
    語法：

$(selector).on(event,childSelector,data,function)

event	必需。規定要從被選元素移除的一個或多個事件或命名空間。 由空格分隔多個事件值，也能夠是數組。必須是有效的事件。
childSelector	可選。規定只能添加到指定的子元素上的事件處理程序（且不是選擇器自己，好比已廢棄的 delegate() 方法）。
data	可選。規定傳遞到函數的額外數據。
function	可選。規定當事件發生時運行的函數。

•     單事件處理

  $(selector).on("click",childselector,data,function);
  $(".header").on("click", ".btn-test", function () { });

   

•     多事件處理  
  1.利用空格分隔多事件

   $(selector).on("click dbclick mouseout",childseletor,data,function);
    $(".header").on("mouseout click", ".btn-test", function () { });

  
  2.利用大括號靈活定義多事件 

  $(selector).on({event1:function, event2:function, ...},childselector);
      $(".header").on({
         "mouseout": function () { alert("這是mouseout事件!"); }, 
         "click": function () { $(".container").slideToggle(); } 
       }, ".btn-test");

   

• 傳入數據

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

   

off()方法

    off() 方法一般用於移除經過on() 方法添加的事件處理程序。
    自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。
    提示：如需添加只運行一次的事件而後移除，請使用 one() 方法。
    語法：

$(selector).off(event,selector,function(eventObj),map)

event	必需。規定要從被選元素移除的一個或多個事件或命名空間。 由空格分隔多個事件值。必須是有效的事件。
selector	可選。規定添加事件處理程序時最初傳遞給 on() 方法的選擇器。
function(eventObj)	可選。規定當事件發生時運行的函數。
map	規定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一個或多個事件，以及當事件發生時運行的函數。

 

bind() live() delegate()方法

（bind() , delegate()3.0被標記棄用   live()1.7被標記棄用，1.9被移除）

bind() 方法向被選元素添加一個或多個事件處理程序，以及當事件發生時運行的函數。
語法：

$(selector).bind({event:function, event:function, ...})

event	必需。規定添加到元素的一個或多個事件。 由空格分隔多個事件值。必須是有效的事件。
data	可選。規定傳遞到函數的額外數據。
function	必需。規定當事件發生時運行的函數。
map	規定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一個或多個事件，以及當事件發生時運行的函數。

bind()基本用法：
   

 $('#foo').bind('click', function() {
      alert('User clicked on "foo."');
    });

 

 $('#foo').bind('mouseenter mouseleave', function() {
      $(this).toggleClass('entered');
    });

 

$('#foo').bind({
         click: function() { // do something on click   }, 
        mouseenter: function() {// do something on mouseenter }
     });

delegate() 方法爲指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。
使用 delegate() 方法的事件處理程序適用於當前或將來的元素（好比由腳本建立的新元素）。
語法：$(selector).delegate(childSelector,event,data,function)

childSelector	必需。規定要添加事件處理程序的一個或多個子元素。
event	必需。規定添加到元素的一個或多個事件。 由空格分隔多個事件值。必須是有效的事件。
data	可選。規定傳遞到函數的額外數據。
function	必需。規定當事件發生時運行的函數。

$("table").delegate("td", "click", function() {
  $(this).toggleClass("chosen");
});
//等價於
$("table").on("click", "td", function() {
  $(this).toggleClass("chosen");
});

live() 方法爲被選元素添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。
經過 live() 方法添加的事件處理程序適用於匹配選擇器的當前及將來的元素（好比由腳本建立的新元素）。
舊版本的jQuery中用戶，應優先使用.delegate()來取代.live()。
語法：$(selector).live(event,data,function)

event	必需。規定添加到元素的一個或多個事件。 由空格分隔多個事件值。必須是有效的事件。
data	可選。規定傳遞到該函數的額外數據。
function	必需。規定當事件發生時運行的函數。

.live() 方法與其它事件方法的相互影響是會使人感到驚訝的。例如，$(document).unbind("click") 會移除全部經過 .live() 添加的 click 事件!
在 jQuery 1.7 以前，若是想阻止經過 .live() 綁定的事件被冒泡到其它元素上，必須在事件處理中返回 false。調用 .stopPropagation() 是不起做用的。
從 jQuery 1.4 開始，.live() 方法支持自定義事件，也支持全部 JavaScript 事件冒泡。它還支持一些本來不能冒泡的事件，包括 change, submit, focus 和 blur。
在 jQuery 1.3.x 中，只能綁定以下 JavaScript 事件：click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.