读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 相关文章推荐
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
js 实现 input type="file" 文件上传示例代码
Aug 07 Javascript
JS 两个字符串时间的天数差计算
Aug 25 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
使用js和canvas实现时钟效果
Sep 08 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的memcached客户端memcached
2011/06/14 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
js停止输出代码
2008/07/20 Javascript
JavaScript类和继承 constructor属性
2010/03/04 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
js实现交通灯效果
2017/01/13 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
python生成特定分布数的实例
2019/12/05 Python
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
单位委托书怎么写
2014/09/21 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
MySQL通过binlog恢复数据
2021/05/27 MySQL
python 进阶学习之python装饰器小结
2021/09/04 Python
Python进程池与进程锁之语法学习
2022/04/11 Python