关于jquery的事件委托-bind，live，delegate，on的区别

（1）bind()方法（只能给已存在的元素绑定事件）

.bind( eventType [, eventData ], handler(eventObject) )

• eventType

  类型: String

  一个包含一个或多个DOM事件类型的字符串，比如"click"或"submit,"或自定义事件的名称。

• eventData

  类型: Object

  一个对象，它包含的数据键值对映射将被传递给事件处理程序。

• handler(eventObject)

  类型: Function()

  每当事件触发时执行的函数。

为一个元素绑定一个事件处理程序。当事件到达一个元素，该元素上绑定的所有与之相对应的类型的事件都会被触发。如果该元素上有多个处理程序注册，他们将永远在其中按固定的次序执行。所有处理程序执行完成后，事件继续沿着正常的事件传播路径继续传播事件。.bind()一个基本的用法：

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

//多个事件类型可以通过用空格隔开一次性绑定：
$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});
//在<div id="foo">（当最初它不会有"entered"样式类时）上的这个效果是当鼠标进入<div>时增加"entered"样式类，鼠标离开时移除这个样式类。

此代码将使元素ID为foo响应click事件。当在用户点击这个元素之后，警报将显示。

优点:

• 适用于各种浏览器
• 连接事件处理函数非常方便快捷
• 可以使用 .click() ,  .hover()等简写方法来更方面地连接事件处理函数
• 对于一个简单的ID选择器,使用.bind() 方法不仅可以很快地连接事件处理函数,而且当事件被触发时, 事件处理函数几乎是马上就被调用了

缺点:

• 这样方法会将所有的事件处理函数附加到所有匹配的元素
• 不可以动态地匹配相同选择器的元素
• 当操作大量匹配的元素时会有性能方面的问题
• 附加操作是在前期完成的,这可能导致页面加载时存在性能问题

（2）live()方法（绑定到document DOM节点上。和.bind()的优势是支持动态数据）

附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。

.live( events, handler(eventObject) )

• events

  类型: String

  一个包含一个JavaScript事件类型的字符串，比如"click"或"keydown,"或自定义事件的名称。从jQuery 1.4开始，字符串可以包含多个空格分隔的事件类型或自定义事件的名称。

• handler(eventObject)

  类型: Function()

  每当事件触发时执行的函数。

$("a.offsite").live("click", function(){ alert("Goodbye!"); });                // jQuery 1.3+

 .live()方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素（即document）。通过将事件信息注册到document上，这个事件处理函数将允许所有冒泡到document的事件调用它（例如委托型、传播型事件）。一旦有一个事件冒泡到document元素上，Jquery会根据选择器或者事件的元数据来决定哪一个事件处理函数应该被调用，如果这个事件处理函数存在的话。这个额外的工作将会在用户交互时对性能方面造成一定的影响，但是初始化注册事件的过程相当地快。

优点:

• 所有的事件处理函数都只会被注册一次，而不是像bind()那样进行多次注册
• 将bind()方法升级到live()方法非常方便，你仅需要将"bind"替代为"live"就可以了
• 那些被动态添加到DOM的元素也将被神奇的匹配到，因为真实的事件信息是被注册到document元素上的
• 你可以在文档加载完之前连接事件处理函数，这样可以帮助你更好地利用你可能没有用的时间

缺点:

• 在调用 .live() 方法之前，jQuery 会先获取与指定的选择器匹配的元素，这一点对于大型文档来说是很花费时间的。
• 不支持链式写法。例如，$("a").find(".offsite, .external").live( ... );  这样的写法是不合法的，并不能像期待的那样起作用。
• 由于所有的 .live() 事件被添加到 document 元素上，所以在事件被处理之前，可能会通过最长最慢的那条路径之后才能被触发。
• 在移动 iOS (iPhone, iPad 和 iPod Touch) 上，对于大多数元素而言，click 事件不会冒泡到文档 body 上，并且如果不满足如下情况之一，就不能和 .live() 方法一起使用：
  1. 使用原生的可被点击的元素，例如, a 或 button，因为这两个元素可以冒泡到 document。
  2. 在 document.body 内的元素使用 .on() 或 .delegate() 进行绑定，因为移动 iOS 只有在 body 内才能进行冒泡。
  3. 需要 click 冒泡到元素上才能应用的 CSS 样式 cursor:pointer (或者是父元素包含 document.documentElement)。但是依需注意的是，这样会禁止元素上的复制/粘贴功能，并且当点击元素时，会导致该元素被高亮显示。
• 在事件处理中调用  event.stopPropagation() 来阻止事件处理被添加到 document 之后的节点中，是效率很低的。因为事件已经被传播到 document 上。
• .live() 方法与其它事件方法的相互影响是会令人感到惊讶的。例如，$(document).unbind("click") 会移除所有通过 .live() 添加的 click 事件!

（3）delegate()方法（更精确的小范围使用事件代理，性能优于.live()）

.delegate( selector, eventType, handler(eventObject) )

为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。

• selector

  类型: String

  选择器字符串，用于过滤器触发事件的元素。

• eventType

  类型: String

  一个包含一个或多个用空格隔开的JavaScript事件类型的字符串，比如"click"或"keydown,"或自定义事件的名称。

• handler(eventObject)

  类型: Function()

  每当事件触发时执行的函数。

$("table").delegate("td", "click", function() {
  $(this).toggleClass("chosen");
});
//是等价于下面使用.on()的代码:
$("table").on("click", "td", function() {
  $(this).toggleClass("chosen");
});

要移除使用delegate()绑定的事件，查看.undelegate()方法。传递和处理事件数据的方式和.on()的方式一样的。

• 自从.live()方法处理事件一旦传播到文档的顶部，live事件是不可能停止传播的。同样地，.delegate() 事件将始终传播给其中包含的被委托元素；同时，任何在 DOM 树中，比这些元素低的元素上绑定的相同事件，在 .delegate() 事件被调用的时候，也会被触发。因此，如果要在事件中阻止委托事件被触发，可以调用event.stopPropagation()或者返回false防止委派处理程序冒泡。

直接将目标元素选择符（"td"）、事件（"click"）及处理程序与“受拖方”$("table")绑定，不额外收集元素、事件传播路径缩短、语义明确；

支持在连缀的DOM遍历方法后面调用，即支持$("table").find("#info").delegate...，支持精确控制；

（4）on()方法-1.9版本整合了之前的三种方式的新事件绑定机制

.on( events [, selector ] [, data ], handler(eventObject) )

• events

  类型: String

  一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"。

• selector

  类型: String

  一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件。

• data

  类型: Anything

  当一个事件被触发时，要传递给事件处理函数的event.data。

• handler(eventObject)

  类型: Function()

  事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false。

//在一个表格的 tbody 中含有 1,000 行，下面这个例子会为这 1,000 元素绑定事件：
$("#dataTable tbody tr").on("click", function(event){
  alert($(this).text());
});

//委派事件的方法只有一个元素的事件处理程序，tbody，并且事件只会向上冒泡一层（从被点击的tr 到 tbody ）:
$("#dataTable tbody").on("click", "tr", function(event){
  alert($(this).text());
});

优点:

• 使各种事件绑定方法一致。
• 因为在Jquery源码中.bind() ， .live() 和.delegate()方法实际上是调用了此方法，因此简化了jQuery代码库并删除了一级重定向。
• 这种方式仍然提供了使用.delegate()方法的优点，并且仍然提供对.bind()方法的支持，如果你需要的话。

缺点:

• 给人带来了一些疑惑，因为方法的实际执行方式将根据你如何调用方法而改变。

总结：

• 使用.bind()方法是很浪费资源的，因为它要匹配选择器中的每一项并且挨个设置相同的事件处理程序
• 建议停止使用.live()方法，因为它已经被弃用了，由于他有很多的问题
• .delegate()方法“很划算”用来处理性能和响应动态添加元素的时候
• 新的.on()方法主要是可以实现.bind() .live() 甚至 .delegate()的功能
• 建议使用.on()方法，如果你的项目使用了1.7+的jQuery的话