读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)

1
2
3
if ( handler === false ) {
    handler = returnFalse;
}

 

2. types 有时会为一个对象,这时真正的handler是types.handler,types是types.type

1
2
3
4
5
// 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等都删除

对应的代码如下

1
2
3
4
5
6
7
8
9
10
// 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循环

 

1
2
3
4
while ( (type = types[ i++ ]) ) {
    ...
 
}

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

  1. 判断事件名称是否具有命名空间(以点号区分),如果没有命名空间则删除该事件名称下的所有事件。否则只删除命名空间的某事件。
  2. 取得事件数组(eventType = events[ type ]),如果没有传handler则表示删除该类型事件的所有hanlder,否则只删除该事件类型的指定handler。
  3. 对特殊事件(如live)的处理
  4. 最后对elemData进行处理,如果events为空对象则删除elemData的events和handle属性。如
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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事件管理数据结构图:

posted on   snandy  阅读(5169)  评论(2编辑  收藏  举报

编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
· 使用C#创建一个MCP客户端
< 2011年7月 >
26 27 28 29 30 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 1 2 3 4 5 6

统计

点击右上角即可分享
微信分享提示