`
zhouyrt
  • 浏览: 1158927 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

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事件管理结构图:

  • 大小: 7.1 KB
  • 大小: 19.2 KB
分享到:
评论

相关推荐

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

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

    读jQuery之十一 添加事件核心方法

    在探讨jQuery实现事件添加的核心方法时,我们首先要明确几个概念:elem、types、handler和data,这些是jQuery.event.add方法的主要参数。Elem指的是要添加事件监听的HTML元素,通常是HTMLElement类型。Types则是指定...

    jquery读书笔记

    jQuery提供了丰富的DOM操作方法,如"$().html()"用于获取或设置元素的HTML内容,"$().append()"和"$().prepend()"分别用于在元素末尾和开头添加内容,"$().remove()"则用于删除元素。此外,"$().clone()"可以复制...

    jQuery源码

    jQuery的核心部分之一是其选择器引擎Sizzle,它实现了高性能的CSS选择器解析。Sizzle使用正则表达式和递归下降解析技术,能够高效地匹配DOM元素。 9. **兼容性处理** 为了兼容不同的浏览器,jQuery做了大量的...

    jQuery的使用方法例子

    以上只是jQuery核心API的一部分,实际使用中还有更多的方法和功能,如AJAX的全局事件、插件机制等。通过熟练掌握这些基础API,开发者可以轻松实现网页的动态交互,提高开发效率。在实际项目中,配合详细的文档和示例...

    读jQuery之十 事件模块概述

    因此,`jQuery.event.remove`可以被认为是整个jQuery删除事件模块的核心。 触发事件的方法包括`trigger`和`triggerHandler`。`trigger`方法用于触发绑定在元素上的事件处理器,并且事件可以冒泡;而`triggerHandler...

    jQuery 核心讲解 帮忙文档

    **jQuery核心讲解** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。这个“jQuery核心讲解帮忙文档”是专为初学者设计的,旨在帮助他们快速掌握jQuery的基本概念...

    jquery1.4.2库 jquery1.4.2中文参考手册

    jQuery的一个显著特性是链式调用,一个选择器可以连续调用多个方法,如 "$('div').hide().fadeIn(1000)",这使得代码更加紧凑和可读。 八、插件系统 jQuery的插件生态丰富,1.4.2版本时已有许多插件可供扩展功能,...

    尚硅谷_教学课件_jQuery

    3. **强大的事件处理**:jQuery封装了JavaScript的事件处理,允许开发者用`.on()`、`.click()`等方法绑定事件,使事件处理更加便捷。 4. **丰富的动画效果**:jQuery的`.animate()`方法可以创建自定义动画,而`....

    jquery-3.5.1.rar

    jQuery的核心之一就是强大的选择器系统,它允许开发者用CSS样式的方式选取DOM元素。例如,`$("#id")`选取ID为`id`的元素,`$(".class")`选取所有class为`class`的元素,而`$("tag")`则选取所有`tag`标签。 3. **...

    jquery 库与原生javascript 常用方法

    **jQuery库与原生JavaScript常用方法** jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互。这个博客主要探讨了jQuery库与原生JavaScript之间的对比,以及它们各自的一些常用...

    jQuery库.zip

    jQuery库是由著名的JavaScript开发者John Resig于2006年创建的一个开源库,它极大地简化了JavaScript语言在网页上的操作,使得DOM(Document Object Model)处理、事件处理、动画制作和Ajax交互变得更加容易。...

    jquery.js下载

    3. **事件处理**:jQuery简化了JavaScript的事件处理,如`$("button").click(function() {...})`用于监听按钮的点击事件。 4. **动画效果**:jQuery内置了许多动画方法,如`fadeIn()`, `slideToggle()`, `animate()...

    75款常用的jquery特效前端网页代码

    1. **jQuery基础**:jQuery的核心是其简洁的API,它使得JavaScript代码更加简洁易读。通过选择器选取DOM元素,然后对这些元素执行操作,如添加/删除类、改变属性或内容,以及响应用户事件。 2. **DOM操作**:jQuery...

    jquery-1.6.4

    本文将深入探讨jQuery 1.6.4的核心特性和应用,以及其中包含的文件`jquery-1.6.4.js`和`jquery-1.6.4.min.js`的区别与作用。 一、jQuery 1.6.4的核心特性 1. **选择器**:jQuery提供了丰富的CSS选择器,使得通过...

    jquery经典学习手册

    5. **DOM操作**:jQuery提供了便利的方法来操作DOM,如添加、删除和修改元素。 ```javascript // 添加元素 $("body").append("<p>New paragraph</p>"); // 删除元素 $("#elementToRemove").remove(); // 修改元素 ...

    Jquery中文帮助文档

    6. **扩展性(Extensions)**:jQuery允许开发者创建自己的插件,通过`.extend()`方法扩展核心功能,实现更高级的定制和复用。 在提供的两个文件——`jquery 1.7 中文 api 修正版.chm`和`jquery 1.7 中文 api 修正...

Global site tag (gtag.js) - Google Analytics