jQuery的.bind() .live() .delegate()和.on()之间的区别

1 .bind() .live() .delegate()和.on()是什么？

jQuery中共有几种事件绑定方式：.bind() .live() .delegate()和.on()。
对于这四个函数，它们之间的区别是什么？在什么情况下应该使用哪种方式最好？

下面是一段HTML代码，作为使用jQuery事件绑定函数的页面样本。

<ul id="members" data-role="listview" data-filter="true">
  <!--其他li-->
  <li>
    <a href="detail.html?id=1" rel="external nofollow">
      <h3>John Resig</h3>
      <p>jQuery Core Lead</p>
      <p>Boston,United States</p>
    </a>
  </li>
  <!--其他li-->
</ul>

2 Bind方法

bind直接绑在目标元素(子元素上)，它解决了各种跨浏览器的问题，当使用它来连接事件处理函数时，它仍然非常简洁，但是也存在着一些性能方面的问题。

//.bind()方法将事件类型和一个事件处理函数直接注册到了被选中的DOM元素中。
//.click()方法只是.bind()方法的简写
$("#members li a").bind("click",function(e){});
$("#members li a").click(function(e){});

.bind()方法将会把事件处理函数连接到所有匹配的a标签，这些操作非常浪费，因为这些相同的事件处理函数是被一遍一遍地重复添加到所有匹配的标签上。

优点

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

缺点

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

3 Live方法

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

$("#members li a").live("click",function(e){});

优点

所有的事件处理函数都只会被注册一次，而不是像bind()那样进行多次注册

缺点

这个方法在jQuery 1.7以后的版本中被弃用了
使用链式操作没有得到正确的支持，可能会出现某些错误
无法有效使用event.stopPropogation()
因为所连接的事件总是被委托到document上，如果DOM层级很深的话，会导致一定的性能问题

3 Delegate方法

.delegate()方法与.live()方法实现方式类似，也是使用事件委托的原理，但它不是将选择器或者事件信息附加到document上，而是要指定附加的元素。

//.delegate()方法会将选择器和事件信息("li a","click")附加到指定的元素上("#members")。
$("#members").delegate("li a","click",function(e){});

优点

可以选择将选择器或事件信息附加到指定的元素上
匹配操作实际上在前面并没有执行，而是用来注册到指定的元素
可以在文档加载完之前连接事件处理函数
链式操作可以得到正确的支持
jQuery仍然需要迭代选择器或事件信息来匹配元素，但筛选的量大幅减少
因为使用了事件委托机制，可以匹配到被动态地添加到DOM的元素

缺点

从bind()方法不可以直接升级到.delegate()方法
jQuery仍然需要使用matchesSelector方法在附加到指定根元素的选择器或者事件信息中筛选决定哪一个事件处理函数会被调用
当操作大量匹配的元素时会有性能方面的问题
附加操作是在前期完成的，这可能导致页面加载时存在性能问题

4 On方法

在jQuery 1.7版本中，.bind(),.live()和.delegate()方法只需要使用.on()方法一种方式来调用它们。

.on()方法可以这样使用：

//bind
$("#members li a").bind("click",function(e){});
$("#members li a").on("click",function(e){});

//live
$("#members li a").live("click",function(e){});
$(document).on("click","#members li a",function(e){});

//delegate
$("#members").delegate("li a","click",function(e){});
$("#members").on("click","li a",function(e){});

优点

使各种事件绑定方法一致
这种方式仍然提供了使用.delegate()方法的优点，并且仍然提供对.bind()方法的支持

缺点

使用时会带来一些疑惑，因为方法的实际执行方式将根据如何调用方法而改变

5 终极简化

对常用的事件，进行了终极简化:

$(...).事件名(function(e){})

更多内容，欢迎关注微信公众号“让知识成为资产”。