- 浏览: 1126573 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
zhizhen23:
LZ 提供的链接地址失效了
重写的isPlainObject方法 -
LovingBaby:
LovingBaby 写道function fun() {}f ...
读jq之二(两种扩展) -
LovingBaby:
说的很清楚!jQuery作者为了实现简洁调用的苦心!高超的编程 ...
读jq之一(jq对象的组成) -
hard_ly:
...
将伪数组转换成数组 -
zlxzlxzlxzlxzlx:
这不能算是任意进制之间的转换,例如二十六进制、十二进制又该如何 ...
用递归实现十进制数转换N进制
事件代理的实现原理很简单:利用浏览器中事件的冒泡(event bubbling)和事件源(target || srcElement)。
某些场景中特别适合使用事件代理,它有如下好处
1、需要管理的handler更少。
2、占用的内存更少(创建的驻留在内存中的handler少了)。
3、DOM元素与代码更少的绑定。
4、DOM变更后(如添加dom节点)无须重新绑定事件处理器。
它也有如下不足
1、并非所有的事件都能冒泡,如load, change, submit, focus, blur(jQuery间接的实现了focus和blur的事件代理)。
2 代理元素的handler管理复杂。
3 不好模拟用户触发事件(jQuery实现了)。
很多开源框架中都加入了事件代理API,比如yui、sencha touch、gaea等。jQuery的事件代理提供给客户端程序员的有以下几个函数
.live 使用document对象代理事件
.delegate 根据选择器指定特定的元素代理事件
.die 解除使用live代理事件的绑定
.undelegate 解除使用delegate代理事件的绑定
如图
以下是delegate的代码
delegate: function( selector, types, data, fn ) { return this.live( types, data, fn, selector ); },
可以看到它依赖于live,实际上live的第四个参数是专门给delegate用的。并不提供给客户端程序员。live和die一个each调用就生成了这两个方法。
jQuery.each(["live", "die"], function( i, name ) { jQuery.fn[ name ] = function( types, data, fn, origSelector /* Internal Use Only */ ) { var type, i = 0, match, namespaces, preType, selector = origSelector || this.selector, context = origSelector ? this : jQuery( this.context ); ... }; });
即生成的live和die方法都具有四个参数分别是types, data, fn, origSelector。
types 事件类型,如“click”
data 是数据(js对象),可以在回调函数中通过事件对象获取到。
fn 事件handler
origSelector css选择器,字符串如“#id”
这里比较奇怪的是第二个参数,因为多数时候第二个参数我们传的是函数类型。如下
$('#id').live('click', function(){ });
live内部做了调换,如
if ( data === false || jQuery.isFunction( data ) ) { fn = data || returnFalse; data = undefined; }
如果第二个参数data为false将使用returnFalse,returnFalse在之前系列中提到过,是一个函数,里面仅一句:返回false。
如果data本身就是function类型的,那么将把data赋值给fn。既然第二个参数本意就是函数,干嘛那么费劲将第二个参数与第三个参数调换呢。不如定义时直接换了,如
jQuery.fn[ name ] = function( types, fn, data, origSelector /* Internal Use Only */ )
这是遗留问题,后续jQuery版本为了与之前版本参数保持一致。
接着说第四个参数origSelector,这个参数只提供给jQuery库内部使用。简单说它是用来实现delegate方法的。live使用document对象做代理,delegate则可以使用指定的元素做代理。这里的origSelector就是指定元素的选择器。
live这段代码
if ( type === "hover" ) { types.push( "mouseenter" + namespaces, "mouseleave" + namespaces ); continue; }
这是jQuery自己加的事件,即可以如下使用
$('#id').live("hover", fn);
这个需结合liveHandler来看,liveHandler中对mouseenter/mouseleave单独做了处理。
再看看使用live时其内部流程是如何的
1,live中调用 jQuery.event.add,此时第二个参数是以字符串"live"开头的。会将data,selector,fn等置入第三个参数。
jQuery.event.add( context[j], "live." + liveConvert( type, selector ), { data: data, selector: selector, handler: fn, origType: type, origHandler: fn, preType: preType } );
2,进入到jQuery.event.add后,会进入到这一句
special.add.call( elem, handleObj );
special.add 如下
add: function( handleObj ) { jQuery.event.add( this, liveConvert( handleObj.origType, handleObj.selector ), jQuery.extend({}, handleObj, {handler: liveHandler, guid: handleObj.handler.guid}) ); },
会发现,又是调用jQuery.event.add,即一个递归调用。这是jQuery事件代理部分较难理解的一部分。
live的实现两次调用jQuery.event.add作用不同。第一次是往elemData.events中添加key为live的对象,第二次是添加key为真正的事件(如click)的对象。第二次的handler是私有的liveHandler。
两次调用后elemData.events 的结构如下(这里以点击事件,段落P元素示例)
即给代理元素(如document对象)添加的真正事件是click,但响应时会从live上取fn。知道了live存放数据的结构,那么die的实现就好理解了。
发表评论
-
如何定制你自己的jQuery
2015-01-12 08:38 2690jQuery随着版本的不断升级代码量也随之增加,从1.0. ... -
读jQuery之二十一(队列queue)
2013-11-21 14:13 2340queue模块在jQuery中分在Effects中,搜索整个 ... -
读jQuery之二十(Deferred对象)
2013-09-24 07:23 1065Deferred对象是由$.Deferred构造的,$.D ... -
读jQuery之十九(多用途回调函数列表对象)
2013-08-08 07:39 3027$.Callbacks是在版本1.7中 ... -
jQuery1.8的几个小变化
2013-05-18 07:57 1116一,.width() 和 .height()方法 1 ... -
读jQuery之十七(attribute/property/class)
2012-04-23 07:44 1523jQuery的属性模块提供了如下方法 attr/rem ... -
读jQuery之十五
2012-04-21 08:27 1112在之前的event-jq-0.2.js基础上继续提取jQuer ... -
读jQuery之十三(触发事件核心方法)
2012-04-20 07:40 1580触发事件,或称模拟用户动作。比如点击,我们可以用代码去模拟用户 ... -
读jQuery之十四
2012-04-20 22:12 1152最近看完了添加事件和删除事件的核心方法,忍不住想把jQu ... -
读jQuery之十八(元素位置)
2012-04-24 07:09 1593本篇所读源码版本为1.7.2 jQuer ... -
读jQuery之十二(删除事件核心方法)
2012-04-19 13:57 1410使用jQuery删除事件(或称解除事件绑定)有三个函数:unb ... -
读jQuery之十一(添加事件核心方法)
2012-04-19 07:07 1920上一篇提到jQuery中添加 ... -
读jQuery之十(事件模块概述)
2012-04-18 14:39 1700jQuery的事件模块是较 ... -
读jQuery之九(一些瑕疵)
2012-04-18 14:34 1193jQuery1.6.1 发布有一段时间了,发现一些冗余代 ... -
读jQuery之十八(元素位置)
2012-04-18 14:27 20本篇所读源码版本为1.7.2 jQuery中提供 ... -
读jq之八(原生事件对象的修复及扩充)
2010-12-04 09:13 2230由于各个浏览器中原生事件对象的 差异性 ,多数 JS库/框 ... -
读jq之七(判断点击了鼠标哪个键)
2010-12-03 18:31 2405jQuery丢弃了标准的 button 属性采用which ... -
jq中html()方法使用不当带来的陷阱
2010-05-29 10:54 5195.html方法当不传参数时用来获取元素的html内容,查看源码 ... -
jQuery1.4.2的一些瑕疵
2010-05-05 09:31 2090jQuery1.4.2 发布有一段时间了,发现一些多余的代 ... -
读jq之六(数据暂存)
2010-03-19 16:52 2520jq的$.data,$.removeData方法设计的很巧妙, ...
相关推荐
虽然事件模块代码很难读,但其提供的API接口还是很清晰的。如下 1 添加事件(bind/one/live/delegate/hover/toggle) bind 基本的添加事件函数。 one 添加只执行一次的事件函数。 live 事件代理(使用document代理)...
jQuery的事件模块严重依赖于其数据储存(jQuery.data),你会发现我的代码中的dataManager对象对应它。 这里只提供bind和unbind方法。暂不包含 1, 事件命名空间(event namespace) 2, 事件代理(event delegation) 3,...
bind()绑定事件的时候,这些元素必须已经存在,而on()可以处理类似于代理这样的东东,也就是说不存在的元素(动态生成的元素也可以处理),如下动态生成的 To do list ,再双击删除,可使用on()轻松完成,你会发现,...
总体架构 如上图所示,在底层分布式文件系统之上搭建代理层,即该系统,所有的功能包括文件目录,文件上传下载的授权等都由该管理系统完成,文件流也经由此系统授权之后才流入或从磁盘读取出返回给客户端,这种...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
原理是初始化颜色选择按钮,然后为颜色选择按钮增加事件处理事件,最后实例化颜色选择器。 Java二进制IO类与文件复制操作实例 16个目标文件 内容索引:Java源码,初学实例,二进制,文件复制 Java二进制IO类与文件...
我日常学习和工作所使用的语言是Java,JavaScript,获取知识的主要途径是书本,相关经典书基本上都读过,不过记性不好,忘得快,要将知识活学活用,还得不断实践,所以我通过创建一些代码库来巩固知识体系。...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
各个子系统前台thymeleaf模板,前端资源模块,使用nginx代理,实现动静分离。 > zheng-upms 本系统是基于RBAC授权和基于用户授权的细粒度权限控制通用平台,并提供单点登录、会话管理和日志管理。接入的系统可自由...