读jQuery之十二（删除事件核心方法）

使用jQuery删除事件（或称解除事件绑定）有三个函数：unbind、die和undelegate。这三个方法都依赖于未公开的jQuery.event.remove（后续使用remove简写）。此为删除事件的核心方法。

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方法都做了哪些事。

当只传elem时，会将elem上添加的所有事件都删除。如$('#id').unbind()
当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++ ]) ) {...}

这是标准的删除事件的流程。大概步骤如下

判断事件名称是否具有命名空间（以点号区分），如果没有命名空间则删除该事件名称下的所有事件。否则只删除命名空间的某事件。
取得事件数组（eventType = events[ type ]），如果没有传handler则表示删除该类型事件的所有hanlder，否则只删除该事件类型的指定handler。
对特殊事件（如live）的处理
最后对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之十二（删除事件核心方法）相关推荐

从航天到原始递归函数的四个定理及其证明——哥德尔读后之十二
从航天到原始递归函数的四个定理及其证明--哥德尔读后之十二人类对于地球的兴趣,如同数学家观察数学角度的变化一样,从地球之中导向了地球之外.六月中旬的两条新闻,都是有关人类飞越地球的航天消息.六月17 ...
敬天爱人大道至简——初读《经营十二条》
老板送了一本稻盛和夫的<经营十二条>让我看看,前段时间一直忙于应付考试与工作,直到今天才抽出时间好好研读了一番.从这本书里读到的第一印象就是日本人性格里特有的精神至上.团队意识.日本人强调 ...
2020年四季度我读过的十二本好书！
这是傅一平的第361篇原创 [提醒:公众号推送规则变了,如果您想及时收到推送,麻烦右下角点个在看,或者把本号置顶] 正文开始 2020年就要过去了,给大家推荐四季度自己读过的不错的书,遗憾的是工作中所 ...
jQuery常用方法（二）-事件
ready(fn); $(document).ready()注意在body中没有onload事件,否则该函数不能执行.在每个页面中可以有很多个函数被加载执行,按照fn的顺序来执行. bind( ty ...
jQuery使用（十二）：工具方法之type()之类型判断
type()的使用类型判断方法之is...() 实现原理可以参考我的另一篇js源码剖析博客: 类型和原生函数及类型转换(二:终结js类型判断) $.type( undefined ) === &qu ...
flowable实战（十二）flowable 核心表ACT_RU_EXECUTION 详解（初学者误解的一张表）
一.ACT_RU_EXECUTION 表(很多初学者迷惑的一张表,以为是流程实例表,其实它叫执行实例表):这个表和act_run_task表,一起控制了用户任务的产生与完成等. 这个表是工作流程的核心 ...
可怕的冷读术：十二种瞬间打开陌生…
作者:石井裕之冷读术,是一种瞬间打开陌生人心扉的方法.目前整个社会的心理状态,与其说是相信别人､接纳别人,还不如说是偏向怀疑别人､批判别人.因此,如果你认真努力地去了解别人的心意,对社会来说,&qu ...
jQuery文本框(input textare)事件绑定方法教程
jquery 的事件绑定已经用on替换了原来的bind,接下来为大家分享下bind的使用方法及input textare事件.目前1.7以上,jquery?的事件绑定已经用on替换了原来的bind,接 ...
十二种标题编写方法,让你流量暴涨
标题是吸引用户去浏览内容的关键所在,对资讯类网站很重要,对电子商务类网站更重要.好的标题对提高内容的点击量是显著的,也是提高网站PV的关键因素之一.如果说文章的内容是一座金库:那么,文章的标题就是打开 ...

读jQuery之十二（删除事件核心方法）

读jQuery之十二（删除事件核心方法）相关推荐

最新文章

热门文章