jQuery的事件模块是较复杂的,前面仅仅提到了对事件对象的包装。即统一了一些兼容性的问题。这篇会综述下jQuery的整个事件模块。后面会详细分析jQuery.event.add/jQuery.event.remove/jQuery.event.trigger。
虽然事件模块代码很难读,但其提供的API接口还是很清晰的。如下
1、 添加事件(bind/one/live/delegate/hover/toggle)
bind 基本的添加事件函数。
one 添加只执行一次的事件函数。
live 事件代理(使用document代理)。
delegate 事件代理(使用指定元素代理)。
hover 模拟css的hover。
toggle 显示/隐藏。
bind/one/live 都是使用内部的jQuery.event.add 来完成事件添加。
delegate 内部调用的是live。
hover 内部使用mouseenter/mouseleave,而mouseenter/mouseleave又使用bind。
toggle 内部使用click,而click内部又调用的是bind。
实际上jQuery的一个each调用就给jQuery对象上增加了24个添加事件的快捷方法
jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
"change select submit keydown keypress keyup error").split(" "), function( i, name ) {
// Handle event binding
jQuery.fn[ name ] = function( data, fn ) {
if ( fn == null ) {
fn = data;
data = null;
}
return arguments.length > 0 ?
this.bind( name, data, fn ) :
this.trigger( name );
};
if ( jQuery.attrFn ) {
jQuery.attrFn[ name ] = true;
}
});
如下图
记住,bind调用的是jQuery.event.add,因此 jQuery.event.add 才是整个jQuery添加事件模块的核心。以上所有的方法都是在其之上构建的上层应用。如图
2、删除事件 (unbind/die/undelegate)
unbind 删除事件基础方法。可以删除一个指定handler,还可以删除某类型事件的全部handler,甚至可以删除挂在element上的全部事件。其内部调用jQuery.event.remove。
die/undelegate 删除事件代理。 内部都使用unbind。
因此, jQuery.event.remove 才是整个jQuery删除事件模块的核心。unbind/die/undelegate都是在其之上构建的上层应用。如图
3、触发事件(trigger/triggerHandler)
trigger 触发一个事件(会冒泡)
triggerHandler 触发一个事件(不会冒泡)
trigger/triggerHandler 内部调用的都是jQuery.event.trigger,因此jQuery.event.trigger 才是整个jQuery触发事件模块的核心。如图
- 大小: 16.2 KB
- 大小: 37.7 KB
- 大小: 28.1 KB
- 大小: 7.1 KB
- 大小: 8.1 KB
分享到:
相关推荐
本篇将重点探讨jQuery的事件模块,这个模块不仅仅是对事件对象的简单包装,它还解决了不同浏览器间的兼容性问题,提供了一套更为统一和强大的事件处理接口。 ### 1. jQuery事件模块基础 在jQuery中,事件处理是...
《jquery技术内幕:深入解析jquery架构设计与实现原理》在分析每个模块时均采用由浅入深的方式,先概述功能、用法、结构和实现原理,然后介绍关键步骤和分析源码实现。让读者不仅知其然,而且知其所以然。事实上,...
**jQuery库概述** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。自2006年首次发布以来,jQuery迅速成为了Web开发的标准工具之一,因其简洁的API和强大的功能而...
2. **拖放(Drag & Drop)**:利用jQuery UI的拖放功能,jPolite实现了模块的自由移动,用户可以轻松调整界面布局。 3. **保存/加载布局**:用户可以保存当前的布局配置,并在后续访问时加载,确保个性化设置的持久化...
4. **模块化**:随着ES6模块的普及,jQuery 3.2也开始支持模块化导入,方便在现代构建工具中灵活使用。 二、压缩版与非压缩版的区别 在下载jQuery 3.2时,通常会提供两种版本:压缩版(min.js)和非压缩版(js)。...
2. **通过模块化工具**:如果您的项目使用了模块化工具(如 Webpack 或 Rollup),则可以在配置文件中引入 jQuery。 ```javascript import $ from 'jquery'; ``` 3. **通过 AMD/CommonJS 规范**:对于遵循 AMD 或...
JQuery插件是开发者为了扩展JQuery核心功能而编写的代码模块。它们通常包含一些预定义的方法和配置选项,以实现特定的UI组件或增强网站功能。JQuery插件易于使用,只需要在页面中引入JQuery库和插件脚本,然后调用...
**jQuery和JavaScript核心API概述** 在Web开发领域,jQuery和JavaScript是两个不可或缺的工具,它们极大地简化了HTML文档操作、事件处理、动画效果以及Ajax交互。这个压缩包包含"JavaScript核心参考手册.chm"和...
- **选择jQuery的原因**:作者指出,在2009年时,jQuery因其灵活性、丰富的功能集以及易于上手等特点而被选中作为解决SharePoint客户端问题的技术之一。 - **遇到的挑战**:作者分享了他们在将jQuery与SharePoint...
一、jQuery OfficeBar概述 "jQuery OfficeBar"是一个精心设计的jQuery插件,旨在为网页应用提供类似Office风格的工具栏。这个工具条具有清晰的布局、丰富的功能和高度的自定义性,使得用户能够快速访问各种操作选项...
jQuery插件是开发者为了增强和扩展jQuery功能而编写的代码模块,使得这些功能可以被方便地复用和维护。 ### 插件的种类 1. **封装全局函数的插件**:这类插件将独立的函数添加到jQuery命名空间下,如`jQuery.ajax...
#### 一、jQuery框架概述 JQuery,一个由美国程序员John Resig创建的JavaScript库,自诞生以来迅速成为全球开发者钟爱的工具之一。它以“写得少,做得多”(WRITELESS,DOMORE)的理念著称,旨在帮助开发者用更少的...
### jQuery基础教程知识点详解 #### 一、jQuery技术框架概览 **1.1 jQuery的起源与发展** - **创建者**: John Resig在2006年初创建了jQuery。 - **最新版本**: 截至资料所述时,最新版本为1.3.2。 - **官方...
- **模块化开发**:教授如何将大型项目拆分为多个模块,并使用jQuery进行有效管理的方法。 - **跨浏览器兼容性**:讲解如何解决不同浏览器间的差异问题,确保代码在各种环境下均能正常运行。 综上所述,《精通...
**jQuery UI 概述** jQuery UI 是一个开源的 JavaScript 库,它基于广泛使用的 jQuery 库,为开发者提供了丰富的用户界面组件和交互效果。这个库旨在简化网页开发,通过简单的 API 能够实现复杂的界面设计,包括...
自2006年发布以来,JQuery 成为了最流行的前端库之一,并在很长一段时间内被广泛应用于各类网站开发项目中。 #### 课程概述 本课程为某学院 VIP 课程系列的一部分,主要针对对 JQuery 内部机制感兴趣的开发者或希望...
为了实现动态交互,框架可能会利用jQuery的事件监听功能,如$(selector).on('click', function() {...}),对用户的操作做出响应。例如,点击按钮触发Ajax请求,更新表格数据。 ### 6. 自定义扩展与模块化 虽然框架...