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
分享到:
相关推荐
虽然事件模块代码很难读,但其提供的API接口还是很清晰的。如下 1 添加事件(bind/one/live/delegate/hover/toggle) bind 基本的添加事件函数。 one 添加只执行一次的事件函数。 live 事件代理(使用document代理)...
《jquery技术内幕:深入解析jquery架构设计与实现原理》在分析每个模块时均采用由浅入深的方式,先概述功能、用法、结构和实现原理,然后介绍关键步骤和分析源码实现。让读者不仅知其然,而且知其所以然。事实上,...
2.3 jquery开发框架介绍 7 3 系统的需求分析 8 3.1可行性分析 8 3.1.1技术性可行性 9 3.1.2经济性可行性 9 3.1.3操作性可行性 10 3.2需求分析 10 3.2.1系统总体概述 10 3.2.2功能性需求 11 3.3非功能性需求 12 4 ...
综合概述 通过原生的JavaScript实现处理cookies是一项头疼的工作,并且jQuery本身也不具备解决处理cookies的函数, 但是这个极其小(压缩后解决500字节左右)的jquery插件可以用来处理cookies的读写和删除。 兼容性 IE...
1.2 浏览器之争 1.2.1 DHTML 1.2.2 浏览器之间的冲突 1.2.3 标准的制定 1.3 JavaScript的实现 1.3.1 ECMAScript 1.3.2 DOM 1.3.3 BOM 1.3.4 新的开始 1.4 Web标准 1.4.1 ...
Turiknox家用滑块概述Magento 2模块,可让您向主页添加jQuery滑块,并能够在管理员中上传滑块。特征使用的滑块库是FlexSlider 2( ),并且可以使用以下功能: 能够上传滑块图像并设置图像标签文本。 能够向滑块图像...
概述 jQuery Navigate 是一个 jQuery 插件,其目标是将任何网站转换为单页网站。 它将链接转换为 turbolinks,它对后端是透明的,并且符合 SEO。 插件本身分为两个子模块: 刷新插件:基本上是ajax引擎 导航插件:...
2.该O2O商城主要包括模块:用户模块、订单模块、商品模块、购物车模块、搜索模块、活动模块、充值模块、支付模块、消息模块、抽奖模块和优惠券模块。 项目职责: 负责服务器端的搜索模块、充值模块、活动模块、抽奖...
第1篇 开发工具及框架概述 第1章 开发前奏 第2章 MyEclipSO开发工具对各种框架的支持: 第3章 实现各种框架的集成 第2篇 典型模块开发 第4章 在线文本编辑器(FCKeditor) 第5章 验证模块(JSP+Serylet+JSValldation) ...
此JavaScript权威指南(第6版)(中文版)pdf共分四大部分,一共22个...第十七章为:事件处理;第十八章为:脚本化http; 第十九章为:jquery库;第二十章为:客户端存储;第二十一章为:多媒体和图形编程;第二十二章为:html 5 api.
综合概述 jQuery在1.7.x版本中,去掉了对浏览器嗅探支持,建议使用特性检测,然而在实际项目中,或多或少也需要这个功能。 兼容性 IE6+、Chrome、Firefox、Safari、Opera 框架依赖 原生JS支持 模块支持 支持AMD、...
02 js之onsubmit事件与组织事件外延 03 DOM节点的增删改查与属性设值 04 正反选练习 05 js练习之二级联动 06 jquery以及jquery对象介绍 07 jquery选择器 08 jquery的查找筛选器 09 jquery练习之左侧菜单 第44章 01...
本书在分析每个模块时均采用由浅入深的方式,先概述功能、用法、结构和实现原理,然后介绍关键步骤和和分析源码实现。让读者不仅知其然,而且知其所以然。事实上,本书的根本价值在于传达一种通过阅读源码快速成长的...
* jQuery * UploadFive * 后端 * Spring/SpringMVC/Hibernate * Spring Security * slf4j/log4j * Gson * POI * Druid * 数据库 * MySQL ## 功能概述 用户管理模块:注册、登录、修改信息、安全退出。 ...
19.4 使用jQuery处理事件 19.5 动画效果 19.6 jQuery中的Ajax 19.7 工具函数 19.8 jQuery选择器和选取方法 19.9 jQuery的插件扩展 19.10 jQuery UI类库 第20章 客户端存储 20.1 localStorage和sessionStorage 20.2 ...
第1篇 开发工具及框架概述 第1章 开发前奏 第2章 MyEclipSO开发工具对各种框架的支持: 第3章 实现各种框架的集成 第2篇 典型模块开发 第4章 在线文本编辑器(FCKeditor) 第5章 验证模块(JSP+Serylet+JSValldation) ...
:eyes: 概述 处理通用功能jQuery Datatable,例如对单列或多列进行排序,限制,全局搜索和单个搜索 支持自动特殊过滤器(除常见的jQuery Datatable参数外的参数)。 在单独的过滤器参数上支持数组值 支持RegExr...