Jquery中bind()、live()、delegate()和on()的区别

自Jquery1.7起,on()方法是 bind()、live()、delegate() 方法的新的替代品,我们推荐使用on()来处理业务中的事件绑定,通过理解这些方法的差异能够更加清晰明白使用on()方法的优势所在

所属分类 WEB

相关标签 JQuery方法绑定

关于on()方法

自Jquery1.7起,on()方法是 bind()、live()、delegate() 方法的新的替代品。

但这不并意味着其他处理事件绑定的方法没有意义,实际开发过程中可以依照场景选择某些方法。

bind()方法

bind()方法将事件类型和一个事件处理函数直接注册到了被选中的DOM元素中。

当使用它来连接事件处理函数时,它仍然非常简洁,但是也存在着一些性能方面的问题

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

优点:

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

缺点:

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

live()方法

live()方法在使用时与bind()方法一致,但在实际处理时,存在一个委托机制。

方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素(即document)。

通过将事件信息注册到document上,这个事件处理函数将允许所有冒泡到document的事件调用它。

一旦有一个事件冒泡到document元素上,Jquery会根据选择器或者事件的元数据来决定哪一个事件处理函数应该被调用。

这个工作在用户交互时对性能方面造成一定的影响,但是初始化注册事件的过程相当地快。

$("#add").live("click",function(e){}); 

优点:

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

缺点:

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

delegate()方法

delegate()方法与live()方式实现方式相类似,但不是将选择器或者事件信息附加到document,而是让你指定附加的元素
与live()方法类似的地方在于,这个方法也是使用事件委托来完成

//#add将作为根元素进行事件委托
$("#add").delegate("a","click",function(e){});

优点:

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

缺点:

  • bind()方法不可以直接升级到delegate()方法
  • Jquery仍然需要使用marchesSelector方法在附加到指定根元素的选择器或者事件信息中筛选决定哪一个事件处理函数会被调用
  • 当操作大量匹配的元素时会有性能方面的问题

on()方法

在Jquery1.7版本后bind()、live()和delegate()方法只需要使用on()方法一种方式来调用它们

//基本实例
$("p").on("click",function(e){});

优点:

  • 使各种事件绑定方法一致
  • 在Jquery源码中bind()、live()、delegate()方法实际上是调用了此方法,简化了jQuery代码库并删除了一级重定向
  • 提供了使用delegate()方法的优点,并且仍然提供对bind()方法的支持

缺点:

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

小结

  1. 减少使用bind()方法,因为它把同一个事件处理函数附加到了每一个匹配的元素上
  2. 停用live()方法,因为它已经被弃用了同时也会带来很多问题
  3. delegate()方法会给你带来很多好处当你需要解决一些性能上的问题和对动态添加的元素作出处理
  4. on()方法其实就是模拟bind()、live()、delegate()实现的语法糖,具体取决于你如何调用它
  5. 尽量使用新的on()方法,尤其在Jquery1.7版本后尽情使用该方法!

米虫

做一个有理想的米虫,伪全栈程序猿,乐观主义者,坚信一切都是最好的安排!

本站由个人原创、收集或整理,如涉及侵权请联系删除

本站内容支持转发,希望贵方携带转载信息和原文链接

本站具有时效性,不提供有效、可用和准确等相关保证

本站不提供免费技术支持,暂不推荐您使用案例商业化

发表观点

提示

昵称

邮箱

QQ

网址

当前还没有观点发布,欢迎您留下足迹!

同类其他

WEB

nvm管理node.js和npm多版本切换

在业务中我们会出现不同的项目依赖与不同版本的 node.js,总不能每次跑项目的时候都去重新安装对应版本的 node.js 和依赖,使用 nvm 可以让多个版本的 node.js 共存,并提供管理和切换

Jquery.bind()实现前端字段公共校验器

严谨的页面开发需要着重关注前台校验相关的内容,确保请求参数的合法以保证服务器安全,界面参数众多需要建立一个公共方法,公共校验器的核心方法是Jquery.bind()

Jquery+CSS轻松实现导航动态显示隐藏

绝大多数网站都会有个顶部导航,对于手机端而言为了便于访问导航常常会做固顶操作,通过CSS样式配合Jquery的scroll()方法或原生JS监听滑动事件方法,可以轻松实现下滑隐藏,上滑显示的效果

前端JS对字段编码预防XSS攻击

跨站脚本攻击是比较严重的一种攻击行为,恶意脚本注入到相关页面字段中轻易获取敏感信息和向后端发起请求,前端应用应当对请求数据进行编码

SVGInject插件动态加载SVG并自定义样式

HTML 中加载 SVG 有很多种方式,但如果需要在 HTML 中通过 CSS 样式自由控制 SVG 样式就必须将 svg 标签插入网页找那个成为 DOM 的一部分,本文借助 SVGInject 插件可以快速完成这一操作

通过Vuex实现全局状态管理

Vuex 是一个专为 Vue 应用程序开发的状态管理模式,通过集中式存储应用所有组件的状态,依照规则确保状态可以进行标准方式变化,比较适合应用在公共基础数据存放,如:用户信息

选择个人头像

昵称

邮箱

QQ

网址

评论提示

  • 头像:系统为您提供了12个头像自由选择,初次打开随机为你选择一个
  • 邮箱:可选提交邮箱,该信息不会外泄,或将上线管理员回复邮件通知
  • 网址:可选提交网址,评论区该地址将以外链的形式展示在您的昵称上
  • 记忆:浏览器将记忆您已选择或填写过得信息,下次评论无需重复输入
  • 审核:提供一个和谐友善的评论环境,本站所有评论需要经过人工审核