jQuery 2.0.3 源码分析 bind/live/delegate/on

传统的时间处理:

给某一个元素绑定一个点击事件,传入一个回调句柄处理

element.addEventListener(‘click‘,doSomething,false);

这样的绑定如果页面上面有几百个需要绑定,那么就要绑定几百多次。

问题:

大量的事件绑定,性能消耗,而且还需要解绑(IE会泄露)

绑定的元素必须要存在。

后期生成HTML会没有事件绑定,需要重新绑定。

语法过于繁杂

事件委托

DOM有个事件流的特性,在页面上触发节点的时候事件都会上下或者向上传播,事件捕捉和事件冒泡。

事件传送可以分为3个阶段:

在事件Capturing捕捉阶段,时间将沿着DOM数向下转送,目标节点的每一个祖先节点,直至目标节点,

在目标target阶段,浏览器在查找到已经指定给目标事件的事件监听器之后,就会运行该事件监听器,目标节点就是触发事件的DOM节点。

在冒泡bubbling阶段,事件将沿着DOM树向上转送,再次逐个访问目标元素的祖先节点到document节点,该过程中的每一步,浏览器都将检测那些不是捕捉事件监听器的事件监听器,并执行他们,

利用事件传播这个机制,就可以实现事件委托。

事件委托就是时间目标自身不处理事件,而是吧处理任务委托给其他父元素或者祖先元素,甚至根元素。

jquery的事件优化.bind(),.live(),.on(),.delegate()

on()方法事件处理程序到当前选定的jquery对象中的元素,提供绑定事件处理的所有功能。

性能对比

生成999个DOM节点,不做任何处理,内存消耗2.2M

给每个元素绑定click事件。增加到5.6M,用on2.2M

只要on的delegate对象是HTML页面缘由的元素,由于是事件的触发是通过Javascript的事件冒泡机制来检测,所以对于所有子元素所有的事件监测均能有效,且由于不用对多个元素进行事件绑定,能够有效的节省内存的损耗。

bing()方法用于直接附加一个事件处理程序到元素上。

处理程序附加到jquery对象中当前选中的元素,所以,在bing()绑定事件的时候,这些元素必须已经存在。

live()将委托的事件处理程序附加到一个页面的decument元素,从而简化了在页面上动态添加的内容上事件处理的使用,

例子:$(‘a‘).live(‘click‘.function(){alert(‘2121‘)});

jquery把alert函数绑定到$(document)元素上,并使用click和a做为参数。

任何时候只要在事件冒泡到document节点上,他就查看该事件是否是一个click事件,以及该事件的目标元素与a这一css选择权是否匹配,如果都是的话,则执行函数。

使用live()会出现的问题:

在调用live方法之前,jquery会先获取与指定的选择权匹配的元素, 这一点对于大型文档来说是很花费时间的。

不支持链式写法,$(‘a‘).find(‘‘).live(),不支持。

由于所有的live事件被添加到document元素上,所以在事件被处理之前,可能回通过最长最慢的那条路径之后才能被触发。

在事件处理中调用event.stopPropagation()来阻止事件内添加到document之后的节点中,是效率很低的,因为事件已经被传播到document上。

delegate

$(#element).delegate(‘a‘,‘click‘,function(){alert(‘1212‘)});

jquery查找#element,并使用click事件和a这一css选择权作为参数把alert函数绑定到#element上。

任何时候只要有事件冒泡到#element上,他就查看该事件是否是click事件,以及该事件的目标元素是否与css选择器匹配,如果两种检查的结果都为真的话,他就执行函数.

这一过程与live类似, 但是它把处理程序绑定带具体的元素而非document这一根上,

(‘a‘).live()==document.delegate(‘a‘)?

delegata方法是一个相对完美的解决方案,但在DOM结构简单的情况在,也可以使用live().

on

其实bind,live,delegate都是通过on()来实现的,unbind,die,undelegate,也是一样的都是通过off来实现的,

在下列情况下,应该使用live或delegate,而不能使用bind

为DOM中的很多元素绑定相同事件。

为DOM中尚不存在的元素绑定事件。

用bind的代价是非常大的,他会把相同的一个事件处理程序hook到所有匹配的DOM元素上,不要再用live了,他已经不再推荐了,而且还有很多问题。

delegate会提供很好的方法来提高效率,同时我们可以添加一事件处理方法到动态添加的元素上,

时间: 2024-10-03 22:51:44

jQuery 2.0.3 源码分析 bind/live/delegate/on的相关文章

转载Aaron ---- jQuery 2.0.3 源码分析core - 选择器

jQuery 2.0.3 源码分析core - 选择器(02) 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象,所以狭隘的说呢,jQuery就是一个选择器,并这个基础上构建和运行查询过滤器! 工欲善其事,必先利其器,所以先从正则入手 我们来分解一个表达式 // A simple way to check for HTML strings // Prioritize

转载Aaron博客 ---- jQuery 2.0.3 源码分析core - 整体架构

jQuery 2.0.3 源码分析core - 整体架构 整体架构 拜读一个开源框架,最想学到的就是设计的思想和实现的技巧. 废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍 我也不会照本宣科的翻译源码,结合自己的实际经验一起拜读吧! github上最新是jquery-master,加入了AMD规范了,我就以官方最新2.0.3为准 整体架构 jQuery框架的核心就是从HTML文档中匹配元素并

jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on

转:http://www.cnblogs.com/aaronjs/p/3440647.html?winzoom=1 事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析实现的, 所以需要有一定的基础才行 为了下一步更好的理解内部的实现,所以首先得清楚的认识到事件接口的划分 网上资料遍地都是,但是作为一个jQuery系列的源码分析,我还是很有必要在重新

jQuery 2.0.3 源码分析 Deferrred概念

转载http://www.cnblogs.com/aaronjs/p/3348569.html JavaScript编程几乎总是伴随着异步操作,传统的异步操作会在操作完成之后,使用回调函数传回结果,而回调函数中则包含了后续的工作.这也 是造成异步编程困难的主要原因:我们一直习惯于“线性”地编写代码逻辑,但是大量异步操作所带来的回调函数,会把我们的算法分解地支离破碎.此时我们不能 用if来实现逻辑分支,也不能用while/for/do来实现循环,更不用提异步操作之间的组合.错误处理以及取消操作了.

jQuery 2.0.3 源码分析 Deferred(最细的实现剖析,带图)

转载http://www.cnblogs.com/aaronjs/p/3356505.html Deferred的概念请看第一篇 http://www.cnblogs.com/aaronjs/p/3348569.html ******************构建Deferred对象时候的流程图************************** **********************源码解析********************** 因为callback被剥离出去后,整个deferred

jQuery 2.0.3 源码分析core - 选择器

转载http://www.cnblogs.com/aaronjs/p/3281911.html 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象,所以狭隘的说呢,jQuery就是一个选择器,并这个基础上构建和运行查询过滤器! 工欲善其事,必先利其器,所以先从正则入手 我们来分解一个表达式 // A simple way to check for HTML strin

最细的实现剖析:jQuery 2.0.3源码分析Deferred

Deferred的概念请看第一篇 http://www.cnblogs.com/aaronjs/p/3348569.html **构建Deferred对象时候的流程图** **源码解析** 因为callback被剥离出去后,整个deferred就显得非常的精简 jQuery.extend({ Deferred:function(){} when:function() )}对于extend的继承这个东东,在之前就提及过jquery如何处理内部jquery与init相互引用this的问题 对于JQ的

jQuery 2.0.3 源码分析core - 整体架构

转载http://www.cnblogs.com/aaronjs/p/3278578.html 整体架构 jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作. 例如: $().find().css() $().hide().html('....').hide(). 从上面的写法上至少可以发现2个问题 1. jQuery对象的构建方式 2 .jQuery方法的调用方式 分析一:jQuery的无new构建 JavaScript是函数式语言,函数可以实现类,类就是面向对象编程中最基本的概

jQuery 2.0.3 源码分析 数据缓存

转载http://www.cnblogs.com/aaronjs/p/3370176.html 历史背景: jQuery从1.2.3版本引入数据缓存系统,主要的原因就是早期的事件系统 Dean Edwards 的 ddEvent.js代码 带来的问题: 没有一个系统的缓存机制,它把事件的回调都放到EventTarget之上,这会引发循环引用 如果EventTarget是window对象,又会引发全局污染 不同模块之间用不同缓存变量 一般jQuery开发,我们都喜欢便捷式的把很多属性,比如状态标志