Jquery之事件綁定(bind(),live(),delegate(),on())

標籤：style   blog   class   c   code   java   

1、.bind()

描述: 為一個元素繫結一個事件處理常式。

.bind()一個基本的用法：

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

可以直接用原生js替代為：

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

在jQuery1.4.3，您現在可以通過傳遞false代替一個事件處理常式。這將相當於一個事件處理常式綁定寫成這樣：function(){ return false; }。在以後通過調用.unbind( eventName, false )來移除這個函數。

具體請參照：http://www.css88.com/jqapi-1.9/bind/

2、live()

描述: 附加一個事件處理器到匹配目前選取器的所有元素，現在和未來。

.live()方法是簡單的;以下是三種事件添加方法的模板，它們是等價的：

$(selector).live(events, data, handler);                // jQuery 1.3+$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+$(document).on(events, selector, data, handler);        // jQuery 1.7+

events 參數可以是一個空格隔開的事件類型名稱的列表和可選的命名空間，或事件名稱字串和處理常式的對象。data參數是可選的，可以省略。例如，以下三種方法調用方式在功能上是相同的（後文還提供了更有效，效能更好的添加代理事件處理的方式）：

$("a.b").live("click", function(){ alert("Goodbye!"); });                // jQuery 1.3+$(document).delegate("a.offsite", "click", function(){ alert("Goodbye!"); });  // jQuery 1.4.3+$(document).on("click", "a.offsite", function(){ alert("Goodbye!"); });        // jQuery 1.7+

.live()方法不再推薦使用。特別是，使用.live()出現的以下問題：
在調用 .live() 方法之前，jQuery 會先擷取與指定的選取器匹配的元素，這一點對於大型文檔來說是很花費時間的。
不支援鏈式寫法。例如，$("a").find(".offsite, .external").live( ... ); 這樣的寫法是不合法的，並不能像期待的那樣起作用。
由於所有的 .live() 事件被添加到 document 元素上，所以在事件被處理之前，可能會通過最長最慢的那條路徑之後才能被觸發。
在移動 iOS (iPhone, iPad 和 iPod Touch) 上，對於大多數元素而言，click 事件不會冒泡到文檔 body 上，並且如果不滿足如下情況之一，就不能和 .live() 方法一起使用：
使用原生的可被點擊的元素，例如, a 或 button，因為這兩個元素可以冒泡到 document。
在 document.body 內的元素使用 .on() 或 .delegate() 進行綁定，因為移動 iOS 只有在 body 內才能進行冒泡。
需要 click 冒泡到元素上才能應用的 CSS 樣式 cursor:pointer (或者是父元素包含 document.documentElement)。但是依需注意的是，這樣會禁止元素上的複製/粘貼功能，並且當點擊元素時，會導致該元素被高亮顯示。
在事件處理中調用 event.stopPropagation() 來阻止事件處理被添加到 document 之後的節點中，是效率很低的。因為事件已經被傳播到 document 上。
.live() 方法與其它事件方法的相互影響是會令人感到驚訝的。例如，$(document).unbind("click") 會移除所有通過 .live() 添加的 click 事件!
對於仍在使用.live()的頁面，那麼下面關於該方法在不同版中的區別，可能會對您有一定協助：
在 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.

具體請參照：http://www.css88.com/jqapi-1.9/live/

例子:
Example: 點擊段落時，添加另一個段落。注意，.live() 會為所有的段落(包括新產生的段落)綁定事件。

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

Example: 通過使用 preventDefault 方法僅取消預設的動作。

$("a").live("click", function(event){  event.preventDefault();});

Example: 使用 .live() 綁定自訂事件。

$("p").live("myCustomEvent", function(e, myName, myValue) {  $(this).text("Hi there!");  $("span").stop().css("opacity", 1)           .text("myName = " + myName)           .fadeIn(30).fadeOut(1000);});$("button").click(function () {  $("p").trigger("myCustomEvent");});

Example: 使用映射綁定多個事件處理。注意，.live() 會為所有的段落(包括新產生的段落)綁定 click, mouseover, 和 mouseout 事件。

$("p").live({  click: function() {    $(this).after("<p>Another paragraph!</p>");  },  mouseover: function() {    $(this).addClass("over");  },  mouseout: function() {    $(this).removeClass("over");  }});

3、delegate()
描述: 為所有匹配選取器（selector參數）的元素繫結一個或多個事件處理函數，基於一個指定的根項目的子集，匹配的元素包括那些目前已經匹配到的元素，也包括那些今後可能匹配到的元素。

這些是兩種方法的等效的方法：

// jQuery 1.4.3+$( elements ).delegate( selector, events, data, handler );// jQuery 1.7+$( elements ).on( events, selector, data, handler );

例如, 下面的 .delegate() 代碼:

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

從jQuery 1.7開始，.delegate()已經被.on()方法取代

是等價於下面使用.on()的代碼:

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

要移除使用delegate()綁定的事件， .undelegate()方法。

直接給例子：

<script type="text/javascript">$(document).ready(function(){$("p").delegate("dragstart",function(){$(this).append("<span>發生了dragstart事件</span>");});$("#btn").click(function(){$("p").undelegate("dragstart");});});</script>

具體請參照：http://www.css88.com/jqapi-1.9/delegate/

4、on()

jQuery on()方法是官方推薦的綁定事件的一個方法。

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

直接上例子： tip:如果你需要移除on()所綁定的方法，可以使用off()方法處理。

$(document).ready(function(){　　$("p").on("click",function(){　　　　$(this).css("background-color","pink");　　});　　$("button").click(function(){　　　　$("p").off("click");　　});});

tip: 如果你的事件只需要一次的操作，可以使用one()這個方法

$(document).ready(function(){　　$("p").one("click",function(){　　　　$(this).animate({fontSize:"+=6px"});　　});});

具體請參照：http://www.cnblogs.com/leejersey/p/3545372.html