读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图片预加载 JS实现图片预加载应用
Dec 03 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 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应用程序来获取Web服务器的状态信息
2006/10/09 PHP
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
php daodb插入、更新与删除数据
2009/03/19 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
运算符&&的三个不同层次
2013/04/07 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
2016/08/02 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
Python入门篇之函数
2014/10/20 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
Linux的文件类型
2012/03/07 面试题
生产副总岗位职责
2013/11/28 职场文书
清华大学自主招生自荐信
2014/01/29 职场文书
工厂会计员职责
2014/02/06 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
单位接收证明格式
2015/06/18 职场文书
运动会广播稿100字
2015/08/19 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
优秀创业计划书分享
2019/07/19 职场文书
详解python字符串驻留技术
2021/05/21 Python
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers