读jQuery之十二 删除事件核心方法


Posted in Javascript onJuly 31, 2011

读jQuery之十二 删除事件核心方法

.remove 所作的事情与上一篇提到的.add 刚好相反。且与.add中的处理代码一一对应,即  .add 中有多少种添加事件的方式.remove就有对应的删除方式。

.remove 定义了四个参数 elem, types, handler, pos 。从字面上看四个参数的意义很明了

elem 为HTMLElement

types 为String类型,事件名称如'click'或'mouseover mouseout'  

handler 为Function类型,事件回调函数

pos 为Number类型,指定数组位置

但.remove内部没这么简单,如
1,handler 有时会传布尔类型false,这时会把handler赋值为另一个函数(此处的处理同.add)。

if ( handler === false ) { 
handler = returnFalse; 
}

2, types 有时会为一个对象,这时真正的handler是types.handler,types是types.type。
// types is actually an event object here 
if ( types && types.type ) { 
handler = types.handler; 
types = types.type; 
}

我们知道变量命名要具有意义,名副其实而避免误导。从这个意义上讲,jQuery中存在大量这样的写法,一个变量往往具有多种含义,晦涩难读。如这里的types,应该是String类型,但实际内部对typeos为Object类型也做了处理。这是JS没有类型检查的原因导致。反过来讲这种语言会比较灵活,jQuery才如此 紧凑,内聚。
闲言少叙,看看.remove方法都做了哪些事。
1、当只传elem时,会将elem上添加的所有事件都删除。如$('#id').unbind()
2、当types为String,且以点号(.)开头时将删除该命名空间下的事件。如$('#id').unbind('.name')。会把添加click.name,mouseover.name等都删除。
对应的代码如下
// Unbind all events for the element 
if ( !types || typeof types === "string" && types.charAt(0) === "." ) { 
types = types || ""; 
for ( type in events ) { 
jQuery.event.remove( elem, type + types ); 
} 
return; 
}

我们发现for in中是个递归调用。
如果这么调用
jQuery.event.remove(el, 'click', fn)
那么是不会走上面的递归的,而是直接进入了while循环
while ( (type = types[ i++ ]) ) { 
... 
}

这是标准的删除事件的流程。大概步骤如下
1、判断事件名称是否具有命名空间(以点号区分),如果没有命名空间则删除该事件名称下的所有事件。否则只删除命名空间的某事件。
2、取得事件数组(eventType = events[ type ]),如果没有传handler则表示删除该类型事件的所有hanlder,否则只删除该事件类型的指定handler。
3、对特殊事件(如live)的处理
4、最后对elemData进行处理,如果events为空对象则删除elemData的events和handle属性。如
// Remove the expando if it's no longer used 
if ( jQuery.isEmptyObject( events ) ) { 
var handle = elemData.handle; 
if ( handle ) { 
handle.elem = null; 
} 
delete elemData.events; 
delete elemData.handle; 
if ( jQuery.isEmptyObject( elemData ) ) { 
jQuery.removeData( elem, undefined, true ); 
} 
}

jQuery事件管理数据结构图:

读jQuery之十二 删除事件核心方法

Javascript 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
javascript之水平横向滚动歌词同步的应用
May 07 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
javascript无刷新评论实现方法
May 13 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
读jQuery之十一 添加事件核心方法
Jul 31 #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
You might like
php二维码生成以及下载实现
2017/09/28 PHP
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
使用原生JS实现弹出层特效
2014/12/22 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
Python写的英文字符大小写转换代码示例
2015/03/06 Python
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
Python多线程原理与用法详解
2018/08/20 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
python将unicode和str互相转化的实现
2020/05/11 Python
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
一个SQL面试题
2014/08/21 面试题
电子商务专业学生职业生涯规划
2014/03/07 职场文书
校园公益广告语
2014/03/13 职场文书
优秀食品类广告词
2014/03/19 职场文书
文明演讲稿范文
2014/05/12 职场文书
大学新闻系求职信
2014/06/03 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js