- 浏览: 1126920 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
zhizhen23:
LZ 提供的链接地址失效了
重写的isPlainObject方法 -
LovingBaby:
LovingBaby 写道function fun() {}f ...
读jq之二(两种扩展) -
LovingBaby:
说的很清楚!jQuery作者为了实现简洁调用的苦心!高超的编程 ...
读jq之一(jq对象的组成) -
hard_ly:
...
将伪数组转换成数组 -
zlxzlxzlxzlxzlx:
这不能算是任意进制之间的转换,例如二十六进制、十二进制又该如何 ...
用递归实现十进制数转换N进制
上一篇提到jQuery中添加事件提供给客户端程序员的接口方法有很多bind/click等,但其实现的核心方法是jQuery.event.add。这篇看看其源码,这个add定义如下(省略大部分)
add: function( elem, types, handler, data ) { if ( elem.nodeType === 3 || elem.nodeType === 8 ) { return; } ... }
定义了四个参数elem、types、handler和data分别为HTMLElement、事件类型(如click)、事件响应函数、数据。此 外,types 可以以空格分开传多种事件("mouseover mouseout")。handler 有时会是一个对象(实现live时)。data 最后会挂在扩充后的event对象 上,即作为event的属性。而event会在handler作为第一个参数拿到,这样也就可以在handler拿到data了。下面详细说明
if ( elem.nodeType === 3 || elem.nodeType === 8 ) { return; }
文本和注释节点直接返回。
if ( handler === false ) { handler = returnFalse; } else if ( !handler ) { // Fixes bug #7229. Fix recommended by jdalton return; }
参数handler为false时,将handler赋值为returnFalse,returnFalse为一个函数,如下
function returnFalse() { return false; }
jQuery通过handler为false来阻止元素默认行为,停止事件冒泡。这个需要结合jQuery.event.handle看。
var handleObjIn, handleObj; if ( handler.handler ) { handleObjIn = handler; handler = handleObjIn.handler; } // Make sure that the function being executed has a unique ID if ( !handler.guid ) { handler.guid = jQuery.guid++; }
定义变量handleObjIn,handleObj。
handler从字面上看是事件响应(回调)函数,但这里出现handler.handler,让人倍感怪异。即什么时候会将handler当一个JS对象传入呢?
多数时候传的还是Function类型的,看看源码中jQuery.event.add的调用可发现jQuery在实现live的时候会传Object类型。如下
add: function( handleObj ) { jQuery.event.add( this, liveConvert( handleObj.origType, handleObj.selector ), jQuery.extend({}, handleObj, {handler: liveHandler, guid: handleObj.handler.guid}) ); },
这时会把handleObjIn赋值为所传的JS对象,真正的handler 却是handleObjIn.handler。这话有点绕,慢慢体会。
// Make sure that the function being executed has a unique ID if ( !handler.guid ) { handler.guid = jQuery.guid++; }
所传参数handler添加个属性guid,为一个数字,自增的从1开始。即使用jQuery添加事件,会为事件响应函数默认的添加了属性guid。这个guid再删除事件时会用到。
// Init the element's event structure var elemData = jQuery._data( elem );
先取elemData,这里使用了前面提到的jQuery._data 。第一次为HTMLElement添加事件是elemData是个空对象({})。
// If no elemData is found then we must be trying to bind to one of the // banned noData elements if ( !elemData ) { return; }
elemData不存在则直接返回。
var events = elemData.events, eventHandle = elemData.handle;
定义events,eventHandle。同样第一次时这两个变量都是undefined。
if ( !events ) { elemData.events = events = {}; } if ( !eventHandle ) { elemData.handle = eventHandle = function( e ) { // Discard the second event of a jQuery.event.trigger() and // when an event is called after a page has unloaded return typeof jQuery !== "undefined" && (!e || jQuery.event.triggered !== e.type) ? jQuery.event.handle.apply( eventHandle.elem, arguments ) : undefined; }; }
给elemData.events和elemData.handle赋值。
// Add elem as a property of the handle function // This is to prevent a memory leak with non-native events in IE. eventHandle.elem = elem;
暂存elem到eventHandle,删除事件注册时会将其置null,避免部分浏览器中内存泄露。
// Handle multiple events separated by a space // jQuery(...).bind("mouseover mouseout", fn); types = types.split(" ");
将字符串以空格为切割符转成数组。这句使其可以一次添加多个事件,多个事件的handler是相同的。后面是一个while循环
while ( (type = types[ i++ ]) ) { handleObj = handleObjIn ? jQuery.extend({}, handleObjIn) : { handler: handler, data: data }; ... }
循环数组,里面依次处理如下
1, 取得handleObj
2, 处理事件命名空间,以点号(.)来区别。如果type有点号,则具有命名空间,否则没有
3, 给handlerObj添加type,guid属性。这些后续删除事件时用到
4, 取到handlers,special。多数情况下使用addEventListener/attachEvent来添加事件。从变量special可看出对于特殊的事件如ready,beforeunload及live事件是特殊处理的。 ready 调用的是jQuery.bindReady,而jQuery.bindReady内部调用的仍然是 addEventListener/attachEvent。beforeunload则是使用window.onbeforeunload来添加。live是实现事件代理的,他的处理也是特殊的。
5, 最后吧handleObj添加到数组handles中。
jQuery.event.add 的最后一句,解决IE中内存泄露。
// Nullify elem to prevent memory leaks in IE elem = null;
jQuery事件管理的数据结构,我做了个图。如下
发表评论
-
如何定制你自己的jQuery
2015-01-12 08:38 2690jQuery随着版本的不断升级代码量也随之增加,从1.0. ... -
读jQuery之二十一(队列queue)
2013-11-21 14:13 2341queue模块在jQuery中分在Effects中,搜索整个 ... -
读jQuery之二十(Deferred对象)
2013-09-24 07:23 1067Deferred对象是由$.Deferred构造的,$.D ... -
读jQuery之十九(多用途回调函数列表对象)
2013-08-08 07:39 3028$.Callbacks是在版本1.7中 ... -
jQuery1.8的几个小变化
2013-05-18 07:57 1117一,.width() 和 .height()方法 1 ... -
读jQuery之十七(attribute/property/class)
2012-04-23 07:44 1523jQuery的属性模块提供了如下方法 attr/rem ... -
读jQuery之十六(事件代理)
2012-04-21 11:45 1681事件代理的实现原理很简单:利用浏览器中事件的冒泡(eve ... -
读jQuery之十五
2012-04-21 08:27 1113在之前的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 1595本篇所读源码版本为1.7.2 jQuer ... -
读jQuery之十二(删除事件核心方法)
2012-04-19 13:57 1410使用jQuery删除事件(或称解除事件绑定)有三个函数:unb ... -
读jQuery之十(事件模块概述)
2012-04-18 14:39 1701jQuery的事件模块是较 ... -
读jQuery之九(一些瑕疵)
2012-04-18 14:34 1196jQuery1.6.1 发布有一段时间了,发现一些冗余代 ... -
读jQuery之十八(元素位置)
2012-04-18 14:27 20本篇所读源码版本为1.7.2 jQuery中提供 ... -
读jq之八(原生事件对象的修复及扩充)
2010-12-04 09:13 2232由于各个浏览器中原生事件对象的 差异性 ,多数 JS库/框 ... -
读jq之七(判断点击了鼠标哪个键)
2010-12-03 18:31 2406jQuery丢弃了标准的 button 属性采用which ... -
jq中html()方法使用不当带来的陷阱
2010-05-29 10:54 5195.html方法当不传参数时用来获取元素的html内容,查看源码 ... -
jQuery1.4.2的一些瑕疵
2010-05-05 09:31 2093jQuery1.4.2 发布有一段时间了,发现一些多余的代 ... -
读jq之六(数据暂存)
2010-03-19 16:52 2527jq的$.data,$.removeData方法设计的很巧妙, ...
相关推荐
上一篇提到jQuery中添加事件提供给客户端程序员的接口方法有很多bind/click等,但其实现的核心方法是jQuery.event.add。
jQuery的事件模块严重依赖于其数据储存(jQuery.data),你会发现我的代码中的dataManager对象对应它。 这里只提供bind和unbind方法。暂不包含 1, 事件命名空间(event namespace) 2, 事件代理(event delegation) 3,...
19.8 jQuery选择器和选取方法 19.9 jQuery的插件扩展 19.10 jQuery UI类库 第20章 客户端存储 20.1 localStorage和sessionStorage 20.2 cookie 20.3 利用IE userData持久化数据 20.4 应用程序存储和离线Web应用 第21...
19.8 jQuery选择器和选取方法 19.9 jQuery的插件扩展 19.10 jQuery UI类库 第20章 客户端存储 20.1 localStorage和sessionStorage 20.2 cookie 20.3 利用IE userData持久化数据 20.4 应用程序存储和离线Web应用 第21...
19.8 jQuery选择器和选取方法 19.9 jQuery的插件扩展 19.10 jQuery UI类库 第20章 客户端存储 20.1 localStorage和sessionStorage 20.2 cookie 20.3 利用IE userData持久化数据 20.4 应用程序存储和离线Web应用 第21...
19.8 jquery选择器和选取方法 566 19.9 jquery的插件扩展 574 19.10 jquery ui类库 577 第20章 客户端存储 579 20.1 localstorage和sessionstorage 581 20.2 cookie 586 20.3 利用ie userdata持久化数据 592 20.4 ...
19.8 jquery选择器和选取方法 566 19.9 jquery的插件扩展 574 19.10 jquery ui类库 577 第20章 客户端存储 579 20.1 localstorage和sessionstorage 581 20.2 cookie 586 20.3 利用ie userdata持久化数据 592 20.4 ...
19.8 jquery选择器和选取方法 566 19.9 jquery的插件扩展 574 19.10 jquery ui类库 577 第20章 客户端存储 579 20.1 localstorage和sessionstorage 581 20.2 cookie 586 20.3 利用ie userdata持久化数据 592 20.4 ...
7.5 数组元素的添加和删除 7.6 数组遍历 7.7 多维数组 7.8 数组方法 7.9 ECMAScript 5中的数组方法 7.10 数组类型 7.11 类数组对象 7.12 作为数组的字符串 第8章 函数 8.1 函数定义 8.2 函数调用 8.3 函数的实参和...
154、能设置一些代码在我所有的JSP文件之上运行?如果可以,能共享吗? 37 155、对一个JSP页,如果多个客户端同时请求它,同步可能吗? 37 156、在jsp:useBean语法中使用beanName有何好处? 37 157、当我使用时,在...
154、能设置一些代码在我所有的JSP文件之上运行?如果可以,能共享吗? 37 155、对一个JSP页,如果多个客户端同时请求它,同步可能吗? 37 156、在jsp:useBean语法中使用beanName有何好处? 37 157、当我使用时,在...
•Rev.#4642 - 新设置启用/禁用最后未读帖子的链接 •Rev.#4641 - 增加阿拉伯语语言感谢的“Ahmadq” •Rev.#4635 - 增加了一个设置来显示/隐藏队在头页链接 •Rev.#4599 - 增加了对专页之间YAF和DNN的...
•Rev.#4642 - 新设置启用/禁用最后未读帖子的链接 •Rev.#4641 - 增加阿拉伯语语言感谢的“Ahmadq” •Rev.#4635 - 增加了一个设置来显示/隐藏队在头页链接 •Rev.#4599 - 增加了对专页之间YAF和DNN的...