读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 相关文章推荐
js URL参数的拼接方法比较
Feb 15 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
详解jQuery中的事件
Dec 14 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
javascript随机变色实例代码
Oct 15 Javascript
微信小程序自定义联系人弹窗
May 26 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 Javascript
Vue3中的Refs和Ref详情
Nov 11 Vue.js
读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
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
py-charm延长试用期限实例
2019/12/22 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
python 调整图片亮度的示例
2020/12/03 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
社区敬老月活动实施方案
2014/02/17 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
欢送会主持词
2015/07/01 职场文书
安全教育主题班会总结
2015/08/14 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL