读jQuery之十一 添加事件核心方法


Posted in Javascript onJuly 31, 2011

这篇看看其源码,这个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 }; 
... 
}

循环数组,里面依次处理如下
, 取得handleObj
, 处理事件命名空间,以点号(.)来区别。如果type有点号,则具有命名空间,否则没有
, 给handlerObj添加type,guid属性。这些后续删除事件时用到
, 取到handlers,special。多数情况下使用addEventListener/attachEvent来添加事件。从变量special可看出对于特殊的事件如ready,beforeunload及live事件是特殊处理的。 ready 调用的是jQuery.bindReady,而jQuery.bindReady内部调用的仍然是 addEventListener/attachEvent。beforeunload则是使用window.onbeforeunload来添加。live是实现事件代理的,他的处理也是特殊的。
, 最后吧handleObj添加到数组handles中。
jQuery.event.add 的最后一句,解决IE中内存泄露。
// Nullify elem to prevent memory leaks in IE 
elem = null;

jQuery事件管理的数据结构,我做了个图。如下
读jQuery之十一 添加事件核心方法
Javascript 相关文章推荐
Javascript 对象的解释
Nov 24 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
vue视图不更新情况详解
May 16 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
node.js通过url读取文件
Oct 16 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 #Javascript
各浏览器对click方法的支持差异小结
Jul 31 #Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 #Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 #Javascript
javascript中length属性的探索
Jul 31 #Javascript
javascript string字符串优化问题
Jul 31 #Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 #Javascript
You might like
PHP+MYSQL的文章管理系统(一)
2006/10/09 PHP
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
微信小程序日历插件代码实例
2019/12/04 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
深入了解Python数据类型之列表
2016/06/24 Python
Python简单的制作图片验证码实例
2017/05/31 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
python读取与处理netcdf数据方式
2020/02/14 Python
什么是TCP/IP
2014/07/27 面试题
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
领导视察欢迎词
2014/01/15 职场文书
1亿有多大教学反思
2014/05/01 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
承诺书样本
2014/08/30 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang