读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 相关文章推荐
function foo的原型与prototype属性解惑
Nov 19 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
微信小程序实现底部导航
Nov 05 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与XML的PDF文档生成技术
2006/10/09 PHP
PHP脚本数据库功能详解(上)
2006/10/09 PHP
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
Python动态加载模块的3种方法
2014/11/22 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
python操作kafka实践的示例代码
2019/06/19 Python
python利用7z批量解压rar的实现
2019/08/07 Python
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
一套Java笔试题
2016/08/20 面试题
如何高效率的查找一个月以内的数据
2012/04/15 面试题
解释下面关于J2EE的名词
2013/11/15 面试题
自我评价范文点评
2013/12/04 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
2014年销售部工作总结
2014/12/01 职场文书