读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 Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
js实现简单的打印表格
Jan 15 Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 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
session 的生命周期是多长
2006/10/09 PHP
PHP多线程抓取网页实现代码
2010/07/22 PHP
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
python交互式图形编程实例(一)
2017/11/17 Python
django基础学习之send_mail功能
2019/08/07 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
新闻系毕业生推荐信
2013/11/16 职场文书
平面设计师岗位职责
2014/09/18 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
健康状况证明模板
2014/10/23 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
车辆挂靠协议书
2016/03/23 职场文书
python基础之类属性和实例属性
2021/10/24 Python
Vue全局事件总线你了解吗
2022/02/24 Vue.js
tomcat下部署jenkins的方法
2022/05/06 Servers