- 浏览: 516701 次
- 性别:
- 来自: 北京
博客专栏
-
jQuery技术内幕
浏览量:198754
最新评论
-
青春依旧:
学习html5哪里好?当然华清远见是首选!
[原创] jQuery源码分析-01总体架构 -
追梦1819:
[size=x-small][color=red][/colo ...
[原创] jQuery源码分析-04 选择器-Sizzle-设计思路 -
niuqiang2008:
学习学习
[原创] jQuery源码分析-04 选择器-Sizzle-工作原理 -
liuweihug:
jquery 解析正则表达式及常见的Regex规则和表达式 - ...
[原创] jQuery源码分析-02正则表达式-RegExp-常用正则表达式 -
liang8768:
mark!!!
[原创] jQuery源码分析-00前言开光
作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com
声明:本文为原创文章,如需转载,请注明来源并保留原文链接。
10.2 源码结构
jQuery的事件模块主要包含以下内容:
|
子模块 |
接口 |
1 |
事件管理工具函数 |
jQuery.event.add/remove/trigger/handle/fix/special |
2 |
事件对象 |
jQuery.Event(模拟实现部分DOM3事件接口) |
3 |
事件特例 |
ready live beforeunload mouseenter mouseleaver(修正为 mouseover mouseout) focusin focusout submit change(浏览器不支持的冒泡事件) |
4 |
事件绑定、删除、触发 |
bind one delegate live die unbind undelegate die trigger triggerHandler |
5 |
便捷事件和扩展方法 |
toggle hover等 |
看看源码结构:
// ---------------------------------------------------------------------------- // ①事件管理工具函数 // ----------------------------------------------------------------------------
jQuery.event = { // 绑定事件句柄 add: function( elem, types, handler, data ) {}, // 删除 remove: function( elem, types, handler, pos ) {}, // 触发 trigger: function( event, data, elem, onlyHandlers ) {}, // 执行 handle: function( event ) {}, // 事件属性 props: "altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode layerX layerY metaKey newValue offsetX offsetY pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "), // 使用jQuery.Event封装原始事件,并修正属性 fix: function( event ) {}, // 事件特例,共九个:ready live beforeunload mouseenter mouseleaver focusin focusout submit change special: { ready: {}, live: {}, beforeunload: {} } };
// ---------------------------------------------------------------------------- // ②jQuery事件对象,模拟实现部分W3C标准的DOM 3级别事件模型,统一了事件的属性 // ----------------------------------------------------------------------------
jQuery.Event = function( src, props ) {}; // jQuery事件对象原型 jQuery.Event.prototype = { // 阻止默认浏览器默认行为 preventDefault: function() {}, // 停止事件传播 stopPropagation: function() {}, // 立即停止事件传播 stopImmediatePropagation: function() {}, // 是否已阻止浏览器默认行为 isDefaultPrevented: returnFalse, // 是否已停止事件传播 isPropagationStopped: returnFalse, // 是否已立即停止事件传播 isImmediatePropagationStopped: returnFalse };
// ---------------------------------------------------------------------------- // ③事件特例 // ----------------------------------------------------------------------------
// 创建mouseenter mouseleave事件,将mouseenter修正为mouseover,mouseleave修正为mouseout jQuery.each({ mouseenter: "mouseover", mouseleave: "mouseout" }, function( orig, fix ) {});
// submit事件代理,如果不支持submit事件冒泡 if ( !jQuery.support.submitBubbles ) {}
// change事件代理,如果不支持change事件冒泡 if ( !jQuery.support.changeBubbles ) {}
// 触发元素elem上指定类型type的事件句柄和默认行为 function trigger( type, elem, args ) {}
// 如果不支持focusin事件冒泡,则转为focus实现(focusin → focus, focusout → blur) if ( !jQuery.support.focusinBubbles ) { jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ) {}); }
// ---------------------------------------------------------------------------- // ④事件绑定、删除、触发 // ----------------------------------------------------------------------------
// 在匹配的元素上绑定指定类型的事件处理函数 jQuery.each(["bind", "one"], function( i, name ) { jQuery.fn[ name ] = function( type, data, fn ) {}; });
jQuery.fn.extend({ // 解绑定:删除一个之前附加的事件句柄 unbind: function( type, fn ) {}, // 事件代理,调用live方法实现 delegate: function( selector, types, data, fn ) {}, // 删除事件代理,调用unbind或die实现 undelegate: function( selector, types, fn ) {}, // 执行事件处理函数和默认行为 trigger: function( type, data ) {}, // 执行事件处理函数,不执行默认行为,只触发匹配的第一个元素,不返回jQuery对象 triggerHandler: function( type, data ) {}, // 在匹配的元素绑定两个或更多的事件处理函数,点击事件触发时,这些函数顺序依次循环执行 toggle: function( fn ) {}, // 便捷方法,在匹配的元素上绑定两个事件处理函数,鼠标移入时执行handlerIn,移出时执行handlerOut hover: function( fnOver, fnOut ) {} });
// live 在匹配当前选择器的元素上绑定一个事件处理函数,包括已经存在的,和未来添加的,即任何添加的元素只要匹配当前选择器就会被绑定事件处理函数 // die 移除用live附加的一个或全部事件处理函数 jQuery.each(["live", "die"], function( i, name ) {}); // live执行句柄 function liveHandler( event ) {} // 在live事件类型type后增加上selector,作为命名空间 function liveConvert( type, selector ) {}
// ---------------------------------------------------------------------------- // ⑤常用事件的便捷接口,绑定或触发 // ----------------------------------------------------------------------------
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 ) { return arguments.length > 0 ? this.bind( name, data, fn ) : this.trigger( name ); }; // 将事件名注册(添加)到jQuery.attrFn,当遇到对同名属性的操作时,转换为对事件接口的调用 if ( jQuery.attrFn ) { jQuery.attrFn[ name ] = true; } }); |
未完待续
- _原创__jQuery源码分析-10事件处理-Event-源码结构.pdf (268.3 KB)
- 下载次数: 123
发表评论
-
[原创] jQuery源码分析-04 选择器-Sizzle-设计思路
2011-11-14 20:59 6723作者:nuysoft/高云 QQ:47214707 Em ... -
[原创] jQuery源码分析-04 选择器-Sizzle-工作原理
2011-11-13 23:45 7753作者:nuysoft/高云 QQ:47214707 EM ... -
[原创] jQuery源码分析-02正则表达式-RegExp-常用正则表达式
2011-10-27 01:29 46440作者:nuysoft/JS攻城师/ ... -
[原创] jQuery源码分析-jQuery中的循环技巧
2011-10-27 00:36 14412作者:nuysoft/JS攻城师/高云 QQ:47214707 ... -
[原创] jQuery源码分析-10事件处理-Event-DOM-ready
2011-10-20 01:20 10460作者:nuysoft/JS攻城师/ ... -
[原创] jQuery源码分析-Java工程师应该向jQuery学习的8点建议
2011-10-18 23:56 12112作者:nuysoft/高云 QQ:47214707 EM ... -
[原创] jQuery源码分析-10事件处理-Event-事件绑定与删除-bind/unbind+live/die+delegat/undelegate
2011-10-18 22:31 15474作者:nuysoft/高云 QQ:47214707 EM ... -
[原创] jQuery源码分析-07数据缓存-Cache
2011-10-13 19:55 11967作者:nuysoft/高云 QQ:47214707 EMail ... -
[原创] jQuery源码分析-06浏览器测试-Support
2011-10-13 19:19 9748作者:nuysoft/高云 QQ:47214707 EMail ... -
[原创] jQuery源码分析系列目录(持续更新)
2011-10-12 12:30 29142作者:nuysoft/高云 QQ:47214707 E ... -
[原创] jQuery源码分析-10事件处理-Event-概述和基础知识
2011-10-12 00:16 11887作者:nuysoft/高云 Q ... -
[原创] jQuery源码分析-08队列 Queue
2011-10-10 23:48 10641作者:nuysoft/高云 Q ... -
[原创] jQuery源码分析-03构造jQuery对象-工具函数
2011-09-29 23:21 29639作者:nuysoft/高云 QQ:47214707 E ... -
[原创] jQuery源码分析-15AJAX-类型转换器
2011-09-29 02:25 7258作者:nuysoft/高云 QQ:47214707 EM ... -
[原创] jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011-09-28 02:20 52730作者:nuysoft/高云 QQ:47214707 EMail ... -
[原创] jQuery源码分析-如何做jQuery源码分析
2011-09-27 00:22 14874近期在ITEYE陆续写了几篇jQuery源码分析,乐在其 ... -
[原创] jQuery源码分析-17尺寸和大小 Dimensions & Offset
2011-09-25 22:05 6916边读边写,不正确的地方,还请各位告诉我,多多交流共同学习, ... -
[原创] jQuery源码分析-15AJAX-前置过滤器和请求分发器
2011-09-23 00:09 13157边读边写,不正确的 ... -
[原创] jQuery源码分析-00前言开光
2011-09-21 23:42 46857jQuery源码分析 - 前言 jQuery凭借简洁的语法和 ... -
[原创] jQuery源码分析-01总体架构
2011-09-21 23:31 748801. 总体架构 1.1 自调用匿名函 ...
相关推荐
NULL 博文链接:https://nuysoft.iteye.com/blog/1202422
jQuery源码分析 00 前言开光 01 总体架构 03 构造jQuery对象-源码结构和核心函数 03 构造jQuery对象-工具函数 05 异步队列 Deferred 08 队列 Queue 09 属性操作 10 事件处理-Event-概述和基础知识 15 AJAX-前置过滤...
Jquery1.26版本的源码分析,pdf格式文档,相当清淅的书籍,前端开发者必看的类库书籍,...采用CSS方式查找Dim节点,jQuery类数组的分析,Dom元素的属性及操作,Event事件分析及应用,jquery中的Ajax实现及源码分析等内容.
对于事件的操作无非是addEvent,fireEvent,removeEvent这三个事 件方法。一般lib都会对浏览器的提供的函数做一些扩展,解决兼容性内存泄漏等问题。第三个问题就是如何得到domReady的状态。 6.1 event的包裹 浏览器的...
在上篇文章给大家介绍了jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构,本篇继续给大家介绍jquery1.9.1源码分析系列相关知识,具体内容请看下文吧。 首先需要明白,浏览器的原生事件是只读的,限制了jQuery...
Jquery1.26版本的源码分析,pdf格式文档,相当清淅的...采用CSS方式查找Dim节点,jQuery类数组的分析,Dom元素的属性及操作,Event事件分析及应用,jquery中的Ajax实现及源码分析等内容. 运行环境:Windows/PDF阅读软件
最主要的原因是elem.click=fn这种方式只能绑定一个事件处理,多次绑定的只会保留最后一次绑定的结果。 下面给大家介绍jquery绑定事件的方式有哪些吧。 复制代码 代码如下: jQuery.fn.eventType([[data,] fn]) 比如...
昨天群里有人问了个事件源码定位的问题,简单描述下是这样的。 在一个不是自己写的页面上,如何...min后的jQuery源码密密麻麻的,看着都眼花。 关于jQuery对于事件的管理,大牛们也分析的非常透彻了,我就不啰嗦了,
JQuery事件之组织事件的发生 示例:表单验证 JQuery事件之页面框架和加载后自动执行 JQuery扩展以及自动执行函数的应用 JQuery阻止事件发生 JQuery扩展 作业 第18周 内容概要 JS正则详解 JS正则详解之验证 组件...
04 socketserver源码分析tcp版本 05 socketserver源码分析udp版 06 ftp作业要求讲解 07 补充:认证客户端链接合法性 第32章 01 FTP之参数解析与命令分发 02 FTP之逻辑梳理 03 FTP之验证功能 05 FTP之文件上传 06 ...
这样选择了读zepto的源码,它不像jQuery那般晦涩难懂,也没有为了兼容低级浏览器而添加了一些奇淫技巧。读它可以了解到一些框架的基础架构,也可以学习灵活运用js ,dom。 阅读记录 文章目录 ...