Jquery中.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=10" rel="external nofollow" >
  <h3>John Resig</h3>
  <p><strong>jQuery Core Lead</strong></p>
  <p>Boston, United States</p>
 </a>
 </li>
 <!-- ... 其他li ... -->
</ul>

使用Bind方法

.bind()方法将事件类型和一个事件处理函数直接注册到了被选中的DOM元素中。这个方法被使用得最久,在此期间,它很好的解决了各种跨浏览器的问题。当使用它来连接事件处理函数时,它仍然非常简洁,但是也存在着一些性能方面的问题,将在下面罗列出来。

/* .bind() 方法将事件类型和一个事件处理函数直接注册到了被选中的DOM元素中。 
 .click() 方法只是.bind() 方法的简写。
*/

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

.bind()方法将会把事件处理函数连接到所有匹配的a标签。这种方式并不好。这样做的话，它不仅在所有匹配的元素中隐含地迭代附加事件处理函数，而且这些操作非常浪费（多余），因为这些相同的事件处理函数是被一遍一遍的重复的添加到所有匹配的标签上。

优点:

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

缺点:

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

使用Live方法

.live()方法使用了事件委托的概念来实施其所谓的“魔法”。你调用live()方法的方式就像是调用bind()方法那样方便。然而在这表面之下， .live()方法与前者的实现方式大不相同。 .live()方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素（即document）。通过将事件信息注册到document上，这个事件处理函数将允许所有冒泡到document的事件调用它（例如委托型、传播型事件）。一旦有一个事件冒泡到document元素上，Jquery会根据选择器或者事件的元数据来决定哪一个事件处理函数应该被调用，如果这个事件处理函数存在的话。这个额外的工作将会在用户交互时对性能方面造成一定的影响，但是初始化注册事件的过程相当地快。

/* 方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素（即document） 
 ( "#members li a" & "click" ) */

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

.bind()这个例子与上面bind()方法的例子对比的话有一个优点在于它仅仅把事件处理函数附加到document元素一次，而不是很多次。这样不仅更快，而且还减少了性能的浪费。然而，使用这个方法也会带来很多问题，下面将一一列出。

优点:

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

缺点:

• 这个方法在Jquery 1.7以后的版本被弃用了，你应该在你的代码里逐步放弃使用它
• 使用这个方法时链式操作没有得到正确的支持，可能会出现某些错误
• 所做的匹配操作基本上没用因为它只用于在document元素上注册事件处理函数
• 使用 event.stopPropogation() 方法将会没用，因为事件总是已经被委托到了document元素上
• 因为所有的选择器或者事件信息都被附加到document元素上了，所以一旦有一个事件要调用某个事件处理函数，Jquery会在一大堆储存的元数据中使用matchesSelector方法来决定哪一个事件处理函数将会被调用，如果这个函数有的话。
• 因为你所连接的事件总是被委托到document上，所如果你的DOM的层级很深的话，这会导致一定的性能问题

使用Delegate方法

.delegate()方法与live()方式实现方式相类似，它不是将选择器或者事件信息附加到document，而是让你指定附加的元素。就像是live()方法一样，这个方法使用事件委托来正确地工作。

如果你跳过了前面关于 .live() 方法的介绍，你可能要回去重新看看它，因为这里涉及到之前我所阐述的一些内部逻辑

/* .delegate() 方法会将选择器和事件信息 ( "li a" & "click" ) 附加到你指定的元素上 ( "#members" )。
*/

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

.delegate()方法十分强大。在上面这个例子中，与事件处理函数关联的选择器和事件信息将会被附加到( #members" )这个元素上。这样做比使用live()高效多了，因为live()方法总是将与事件处理函数关联的选择器和事件信息附加到document元素上。另外，使用.delegate()方法解决许多其他问题。请参阅下方列出的详细信息。

优点:

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

缺点:

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

使用On方法

你知道吗，在Jquery 1.7版本中.bind() ， .live() 和.delegate()方法只需要使用.on()方法一种方式来调用它们。当然.unbind() ， .die() 和.undelegate()方法也一样。一下代码片段是从Jquery 1.7版本的源码中截取出来的

bind: function( types, data, fn ) {
 return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
 return this.off( types, null, fn );
},

live: function( types, data, fn ) {
 jQuery( this.context ).on( types, this.selector, data, fn );
 return this;
},
die: function( types, fn ) {
 jQuery( this.context ).off( types, this.selector || "**", fn );
 return this;
},

delegate: function( selector, types, data, fn ) {
 return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
 return arguments.length == 1 ? 
  this.off( selector, "**" ) : 
  this.off( types, selector, fn );
}

考虑到这一点，使用.on()方法看起来像以下方式一样...

/* Jquery的 .bind() , .live() 和 .delegate() 方法只需要使用`.on()`方法一种方式来调用它们 */

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

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

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

你可能注意到了，我如何使用.on()方法决定了它如何调用其他方法。你可以认为.on()方法被具有不同签名的方法”重载“了，而这些方法实现了不同的事件绑定的连接方式。 .on()方法的出现为API带来了很多方面的一致性，并希望让事情变得不那么混乱。

优点:

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

缺点:

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

总结

如果你对不同的绑定事件方法有所迷惑，那么不要担心，因为API发展了一段时间了，有很多前人的经验可以借鉴。也有很多人将这些方法视为魔法，不过一旦你了解了他们工作背后的原理，将帮助您了解如何更好地处理项目。
以下是这篇文章的精华所在...

• 使用.bind()方法非常浪费性能因为它把同一个事件处理函数附加到了每一个匹配的元素上
• 你应该停止使用.live()方法因为它被弃用了同时也会带来很多问题
• 使用.delegate()方法会给你带来很多好处当你需要解决一些性能上的问题和对动态添加的元素作出处理
• 新的.on()方法其实就是模拟.bind() ， .live() 和.delegate()实现的语法糖，具体取决于你如何调用它
• 新的方向是使用新的.on()方法。先熟悉语法，并开始在你的所有的Jquery 1.7版本以上的项目使用它吧！

对于上面列举的优点或者缺点，你有新的补充吗？你最近开始使用delegate()方法了吗？你对新的.on()方法怎么看呢？把你的想法写到用评论告诉我吧！谢谢！

第一次翻译，文章中可能会出现一些不通顺的地方，希望得到大家的理解，毕竟我还是个学生啊！

好了，大概就这样，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持

原文链接

# jquery  # bind  # on  # live  # delegate  # bind区别  # AngularJs动态加载模块和依赖注入详解  # 深入浅析AngularJS中的module(模块)  # 详解AngularJS中module模块的导入导出  # angularjs学习笔记之三大模块（modal  # controller  # view）  # AngularJS中的模块详解  # 详解VUE中v-bind的基本用法  # vue学习笔记之指令v-text && v-html && v-bind详解  # 深入浅析AngularJs模版与v-bind  # 选择器  # 你可以  # 链式  # 将会  # 将与  # 加载  # 绑定  # 如果你  # 文档  # 是在  # 也会  # 有一个  # 不可以  # 会在  # 一遍  # 用了  # 带来了  # 这样做  # 你对  # 你应该 

相关文章： 详解jQuery中基本的动画方法  C++时间戳转换成日期时间的步骤和示例代码  一键网站制作软件,义乌购一件代发流程？  制作网站的公司有哪些,做一个公司网站要多少钱？  如何做静态网页,sublimetext3.0制作静态网页？  公司网站的制作公司,企业网站制作基本流程有哪些？  青浦网站制作公司有哪些,苹果官网发货地是哪里？  如何高效完成独享虚拟主机建站？  金*站制作公司有哪些,金华教育集团官网？  学校免费自助建站系统：智能生成+拖拽设计+多端适配  购物网站制作公司有哪些,哪个购物网站比较好？  阿里云网站搭建费用解析：服务器价格与建站成本优化指南  大连网站制作公司哪家好一点,大连买房网站哪个好？  如何在腾讯云服务器上快速搭建个人网站？  如何快速搭建高效可靠的建站解决方案？  临沂网站制作公司有哪些,临沂第四中学官网？  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  如何通过智能用户系统一键生成高效建站方案？  建站之星后台密码如何安全设置与找回？  如何在阿里云部署织梦网站？  简易网站制作视频教程,使用记事本编写一个简单的网页html文件？  如何在沈阳梯子盘古建站优化SEO排名与功能模块？  免费公司网站制作软件,如何申请免费主页空间做自己的网站？  官网自助建站平台指南：在线制作、快速建站与模板选择全解析  TestNG的testng.xml配置文件怎么写  如何选择最佳自助建站系统？快速指南解析优劣  寿县云建站：智能SEO优化与多行业模板快速上线指南  招商网站制作流程,网站招商广告语？  如何在万网开始建站？分步指南解析  如何零基础开发自助建站系统？完整教程解析  网站专业制作公司有哪些,做一个公司网站要多少钱？  交易网站制作流程,我想开通一个网站，注册一个交易网址，需要那些手续？  如何在Windows服务器上快速搭建网站？  手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办？  建站之星收费标准详解：套餐费用及年费价格表一览  如何在IIS7中新建站点？详细步骤解析  韩国代理服务器如何选？解析IP设置技巧与跨境访问优化指南  建站之星官网登录失败？如何快速解决？  如何在建站宝盒中设置产品搜索功能？  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  公司网站设计制作厂家,怎么创建自己的一个网站？  浅析上传头像示例及其注意事项  如何设计高效校园网站？  如何撰写建站申请书？关键要点有哪些？  如何零基础在云服务器搭建WordPress站点？  为什么Go需要go mod文件_Go go mod文件作用说明  建站主机类型有哪些？如何正确选型  文字头像制作网站推荐软件,醒图能自动配文字吗？  无锡营销型网站制作公司,无锡网选车牌流程？  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？