使用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删除事件(或称解除事件绑定)有三个函数:unbind、die和undelegate。这三个方法都依赖于未公开的jQuery.event.remove(后续使用.remove简写)。此为删除事件的核心方法。
在探讨jQuery实现事件添加的核心方法时,我们首先要明确几个概念:elem、types、handler和data,这些是jQuery.event.add方法的主要参数。Elem指的是要添加事件监听的HTML元素,通常是HTMLElement类型。Types则是指定...
jQuery提供了丰富的DOM操作方法,如"$().html()"用于获取或设置元素的HTML内容,"$().append()"和"$().prepend()"分别用于在元素末尾和开头添加内容,"$().remove()"则用于删除元素。此外,"$().clone()"可以复制...
jQuery的核心部分之一是其选择器引擎Sizzle,它实现了高性能的CSS选择器解析。Sizzle使用正则表达式和递归下降解析技术,能够高效地匹配DOM元素。 9. **兼容性处理** 为了兼容不同的浏览器,jQuery做了大量的...
以上只是jQuery核心API的一部分,实际使用中还有更多的方法和功能,如AJAX的全局事件、插件机制等。通过熟练掌握这些基础API,开发者可以轻松实现网页的动态交互,提高开发效率。在实际项目中,配合详细的文档和示例...
因此,`jQuery.event.remove`可以被认为是整个jQuery删除事件模块的核心。 触发事件的方法包括`trigger`和`triggerHandler`。`trigger`方法用于触发绑定在元素上的事件处理器,并且事件可以冒泡;而`triggerHandler...
**jQuery核心讲解** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。这个“jQuery核心讲解帮忙文档”是专为初学者设计的,旨在帮助他们快速掌握jQuery的基本概念...
jQuery的一个显著特性是链式调用,一个选择器可以连续调用多个方法,如 "$('div').hide().fadeIn(1000)",这使得代码更加紧凑和可读。 八、插件系统 jQuery的插件生态丰富,1.4.2版本时已有许多插件可供扩展功能,...
3. **强大的事件处理**:jQuery封装了JavaScript的事件处理,允许开发者用`.on()`、`.click()`等方法绑定事件,使事件处理更加便捷。 4. **丰富的动画效果**:jQuery的`.animate()`方法可以创建自定义动画,而`....
jQuery的核心之一就是强大的选择器系统,它允许开发者用CSS样式的方式选取DOM元素。例如,`$("#id")`选取ID为`id`的元素,`$(".class")`选取所有class为`class`的元素,而`$("tag")`则选取所有`tag`标签。 3. **...
**jQuery库与原生JavaScript常用方法** jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互。这个博客主要探讨了jQuery库与原生JavaScript之间的对比,以及它们各自的一些常用...
jQuery库是由著名的JavaScript开发者John Resig于2006年创建的一个开源库,它极大地简化了JavaScript语言在网页上的操作,使得DOM(Document Object Model)处理、事件处理、动画制作和Ajax交互变得更加容易。...
3. **事件处理**:jQuery简化了JavaScript的事件处理,如`$("button").click(function() {...})`用于监听按钮的点击事件。 4. **动画效果**:jQuery内置了许多动画方法,如`fadeIn()`, `slideToggle()`, `animate()...
1. **jQuery基础**:jQuery的核心是其简洁的API,它使得JavaScript代码更加简洁易读。通过选择器选取DOM元素,然后对这些元素执行操作,如添加/删除类、改变属性或内容,以及响应用户事件。 2. **DOM操作**:jQuery...
本文将深入探讨jQuery 1.6.4的核心特性和应用,以及其中包含的文件`jquery-1.6.4.js`和`jquery-1.6.4.min.js`的区别与作用。 一、jQuery 1.6.4的核心特性 1. **选择器**:jQuery提供了丰富的CSS选择器,使得通过...
5. **DOM操作**:jQuery提供了便利的方法来操作DOM,如添加、删除和修改元素。 ```javascript // 添加元素 $("body").append("<p>New paragraph</p>"); // 删除元素 $("#elementToRemove").remove(); // 修改元素 ...
6. **扩展性(Extensions)**:jQuery允许开发者创建自己的插件,通过`.extend()`方法扩展核心功能,实现更高级的定制和复用。 在提供的两个文件——`jquery 1.7 中文 api 修正版.chm`和`jquery 1.7 中文 api 修正...