读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 相关文章推荐
基于datagrid框架的查询
Apr 08 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
读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框架的性能
2008/01/10 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
Symfony核心类概述
2016/03/17 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
Python中return语句用法实例分析
2015/08/04 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
什么是URL
2015/12/13 面试题
事业单位请假制度
2014/01/13 职场文书
法院信息化建设方案
2014/05/21 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
门店店长岗位职责
2015/04/14 职场文书
初中毕业生感言
2015/07/31 职场文书
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技