读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 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
javascript中字符串的定义示例代码
Dec 19 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 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 递归效率分析
2009/11/24 PHP
php编写的简单页面跳转功能实现代码
2013/11/27 PHP
php创建sprite
2014/02/11 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
JS input 数字验证代码
2009/07/30 Javascript
JavaScript delete 属性的使用
2009/10/08 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
用Python实现大文本文件切割的方法
2019/01/12 Python
Python的高阶函数用法实例分析
2019/04/11 Python
wxPython实现带颜色的进度条
2019/11/19 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
python开发入门——列表生成式
2020/09/03 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
职业规划书如何设计?
2014/01/09 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
2014年度工作总结报告
2014/12/15 职场文书