jQuery 事件委托on、bind、live、delegate

http://www.jb51.net/article/57827.htm

bind: 3.0-

  • 表格中要绑定单击事件的5000个单元格,那么查找和遍历5000个单元格会导致脚本执行速度明显变慢,而保存5000个td元素和相应的事件处理程序也会占用大量内存
  • 通过Ajax从服务器动态加载另外50张照片,bind不为50个这50单元格绑定事件。使用.bind()方法只会给第一页中的50个单元格绑定单击事件,动态加载的后续页面中的单元格都不会有这个单击事件。

live: 1.7-

  • $()函数会找到当前页面中的所有td元素并创建jQuery对象,但在确认事件目标时却不用这个td元素集合,而是使用选择符表达式与event.target或其祖先元素进行比较,因而生成这个jQuery对象会造成不必要的开销;
  • 默认把事件绑定到$(document)元素,如果DOM嵌套结构很深,事件冒泡通过大量祖先元素会导致性能损失;
  • 只能放在直接选择的元素后面,不能在连缀的DOM遍历方法后面使用,即$("#info_table td").live...可以,但$("#info_table").find("td").live...不行;
    收集td元素并创建jQuery对象,但实际操作的却是$(document)对象

delegate: 3.0-

  • 直接将目标元素选择符("td")、事件("click")及处理程序与“受拖方”$("#info_table")绑定,不额外收集元素、事件传播路径缩短、语义明确;
  • 支持在连缀的DOM遍历方法后面调用,即支持$("table").find("#info").delegate...,支持精确控制;
  • 建议使用on

jQuery中的bind(), live(), on(), delegate()
http://www.cnblogs.com/moonreplace/archive/2012/10/09/2717136.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,687评论 18 503
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,394评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,205评论 0 1
  • jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript...
    一木_qintb阅读 1,036评论 0 4
  • 美对人有一种天生的吸引力,很多人都不得不承认自己是外貌控,男人打量女人的第一眼往往是看是否外貌合格,女人遇见陌生人...
    hi阿玖阅读 762评论 4 2