- 浏览: 1126559 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
zhizhen23:
LZ 提供的链接地址失效了
重写的isPlainObject方法 -
LovingBaby:
LovingBaby 写道function fun() {}f ...
读jq之二(两种扩展) -
LovingBaby:
说的很清楚!jQuery作者为了实现简洁调用的苦心!高超的编程 ...
读jq之一(jq对象的组成) -
hard_ly:
...
将伪数组转换成数组 -
zlxzlxzlxzlxzlx:
这不能算是任意进制之间的转换,例如二十六进制、十二进制又该如何 ...
用递归实现十进制数转换N进制
由于各个浏览器中原生事件对象的 差异性
,多数 JS库/框架
都或多或少的对原生事件对象进行了修复及扩充。
比如,停止事件冒泡IE用 cancelBubble
,标准浏览器则用 stopPropagation
。
获取事件源对象,IE用 srcElement
,标准浏览器则用 target
诸如此类。
jQuery 对原生事件对象的修复和扩充主要使用 jQuery.Event
类和 jQuery.event.fix
方法。
jQuery.Event = function( src ) { // Allow instantiation without the 'new' keyword if ( !this.preventDefault ) { return new jQuery.Event( src ); } // Event object if ( src && src.type ) { this.originalEvent = src; this.type = src.type; // Event type } else { this.type = src; } // timeStamp is buggy for some events on Firefox(#3843) // So we won't rely on the native value this.timeStamp = jQuery.now(); // Mark it as fixed this[ jQuery.expando ] = true; }; function returnFalse() { return false; } function returnTrue() { return true; } // jQuery.Event is based on DOM3 Events as specified by the ECMAScript Language Binding // http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html jQuery.Event.prototype = { preventDefault: function() { this.isDefaultPrevented = returnTrue; var e = this.originalEvent; if ( !e ) { return; } // if preventDefault exists run it on the original event if ( e.preventDefault ) { e.preventDefault(); // otherwise set the returnValue property of the original event to false (IE) } else { e.returnValue = false; } }, stopPropagation: function() { this.isPropagationStopped = returnTrue; var e = this.originalEvent; if ( !e ) { return; } // if stopPropagation exists run it on the original event if ( e.stopPropagation ) { e.stopPropagation(); } // otherwise set the cancelBubble property of the original event to true (IE) e.cancelBubble = true; }, stopImmediatePropagation: function() { this.isImmediatePropagationStopped = returnTrue; this.stopPropagation(); }, isDefaultPrevented: returnFalse, isPropagationStopped: returnFalse, isImmediatePropagationStopped: returnFalse };
jQuery.Event 类主要做了一下工作
1,扩充了 originalEvent 属性,该属性暂存了原生事件对象。
2,修复了 timeStamp
,该属性IE6/7/8不支持,其它支持的各个浏览器中返回值也不同。
3, 阻止DOM元素默认行为统一采用 preventDefault
4, 停止事件冒泡统一采用 stopPropagation
5, 实现或扩充了 DOM3事件
的几个方法:stopImmediatePropagation、isDefaultPrevented、isPropagationStopped、isImmediatePropagationStopped
此外,jQuery.Event的 写类方式
也较独特。它 使用隐藏的new创建对象
。
jQuery.event.fix方法 如下
fix: function( event ) { if ( event[ jQuery.expando ] ) { return event; } // store a copy of the original event object // and "clone" to set read-only properties var originalEvent = event; event = jQuery.Event( originalEvent ); for ( var i = this.props.length, prop; i; ) { prop = this.props[ --i ]; event[ prop ] = originalEvent[ prop ]; } // Fix target property, if necessary if ( !event.target ) { // Fixes #1925 where srcElement might not be defined either event.target = event.srcElement || document; } // check if target is a textnode (safari) if ( event.target.nodeType === 3 ) { event.target = event.target.parentNode; } // Add relatedTarget, if necessary if ( !event.relatedTarget && event.fromElement ) { event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement; } // Calculate pageX/Y if missing and clientX/Y available if ( event.pageX == null && event.clientX != null ) { var doc = document.documentElement, body = document.body; event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0); event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0); } // Add which for key events if ( event.which == null && (event.charCode != null || event.keyCode != null) ) { event.which = event.charCode != null ? event.charCode : event.keyCode; } // Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs) if ( !event.metaKey && event.ctrlKey ) { event.metaKey = event.ctrlKey; } // Add which for click: 1 === left; 2 === middle; 3 === right // Note: button is not normalized, so don't use it if ( !event.which && event.button !== undefined ) { event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) )); } return event; },
它主要做了以下工作
1,event = jQuery.Event( originalEvent ); 该句创建了一个jQuery.Event类的实例对象,该对象修复及扩充上面刚刚提到了。
2, 一个循环将原生事件对象的所有属性拷贝给 1 中的event对象。
for ( var i = this.props.length, prop; i; ) { prop = this.props[ --i ]; event[ prop ] = originalEvent[ prop ]; }
3, 统一事件源对象为 target
。
4, 统一事件相关对象为 relativeTarget
。
5, 扩充了pageX
, pageY
,这两个属性首次在Firefox中引入的。不支持该属性的浏览器使用clientX/Y计算得到。
6, 扩充了 which
,使用它获取键盘按键值(keyCode)。这个属性也是在Firefox引入的。
7, 修复了metaKey。
8, 扩充了which,使用它获取鼠标按键值
细心的人可能注意到了,jQuery获取键盘按键值和鼠标按键值都是采用which。它没有向其它属于一样去兼容W3C已有标准 (button
)。这一点我在 读jq之七
及 各浏览器中鼠标按键值的差异
做了详细分析。
好了,整个jQuery事件对象就是如此..
以上源码摘自 jQuery1.4.4
。
发表评论
-
如何定制你自己的jQuery
2015-01-12 08:38 2690jQuery随着版本的不断升级代码量也随之增加,从1.0. ... -
读jQuery之二十一(队列queue)
2013-11-21 14:13 2339queue模块在jQuery中分在Effects中,搜索整个 ... -
读jQuery之二十(Deferred对象)
2013-09-24 07:23 1064Deferred对象是由$.Deferred构造的,$.D ... -
读jQuery之十九(多用途回调函数列表对象)
2013-08-08 07:39 3027$.Callbacks是在版本1.7中 ... -
jQuery1.8的几个小变化
2013-05-18 07:57 1116一,.width() 和 .height()方法 1 ... -
读jQuery之十七(attribute/property/class)
2012-04-23 07:44 1523jQuery的属性模块提供了如下方法 attr/rem ... -
读jQuery之十六(事件代理)
2012-04-21 11:45 1679事件代理的实现原理很简单:利用浏览器中事件的冒泡(eve ... -
读jQuery之十五
2012-04-21 08:27 1112在之前的event-jq-0.2.js基础上继续提取jQuer ... -
读jQuery之十三(触发事件核心方法)
2012-04-20 07:40 1580触发事件,或称模拟用户动作。比如点击,我们可以用代码去模拟用户 ... -
读jQuery之十四
2012-04-20 22:12 1152最近看完了添加事件和删除事件的核心方法,忍不住想把jQu ... -
读jQuery之十八(元素位置)
2012-04-24 07:09 1592本篇所读源码版本为1.7.2 jQuer ... -
读jQuery之十二(删除事件核心方法)
2012-04-19 13:57 1410使用jQuery删除事件(或称解除事件绑定)有三个函数:unb ... -
读jQuery之十一(添加事件核心方法)
2012-04-19 07:07 1919上一篇提到jQuery中添加 ... -
读jQuery之十(事件模块概述)
2012-04-18 14:39 1700jQuery的事件模块是较 ... -
读jQuery之九(一些瑕疵)
2012-04-18 14:34 1193jQuery1.6.1 发布有一段时间了,发现一些冗余代 ... -
读jQuery之十八(元素位置)
2012-04-18 14:27 20本篇所读源码版本为1.7.2 jQuery中提供 ... -
读jq之七(判断点击了鼠标哪个键)
2010-12-03 18:31 2405jQuery丢弃了标准的 button 属性采用which ... -
jq中html()方法使用不当带来的陷阱
2010-05-29 10:54 5195.html方法当不传参数时用来获取元素的html内容,查看源码 ... -
jQuery1.4.2的一些瑕疵
2010-05-05 09:31 2089jQuery1.4.2 发布有一段时间了,发现一些多余的代 ... -
读jq之六(数据暂存)
2010-03-19 16:52 2520jq的$.data,$.removeData方法设计的很巧妙, ...
相关推荐
jq、js原生五星评价特效
案例是几年前在学校的时候做的,一些学习过程,案例 主要包括:轮播图,弹出框效果,下拉菜单,动画函数,全选框等等
JQ鼠标滚轮事件可以响应鼠标滚轮事件,JQ鼠标滚轮事件可以响应鼠标滚轮事件
原生jq实现天气信息,每日24点刷新。参数参考 http://www.k780.com/api/weather.today
用于使用jq,jq的使用比js更加方便,大大缩短了的代码开发的进程,但原生js是需要掌握的,jq基于原生js研发出来的
分享一个 jq拖拽(支持双击事件和拖拽)
下面小编就为大家带来一篇原生js实现jquery函数animate()动画效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
原生js实现jquery $.extend方法 通过遍历对象属性来实现
JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转...
适合两节课的量,边做边练,带领学生熟悉原型链。原生JS编写,不涉及JQ。
里面包含两个例子, JQuery版本的PDF文件读取展示在HTML页面 pdf.js原生JS版本的读取PDF文件展示在HTML页面
jq 验证码插件jq 验证码插件jq 验证码插件jq 验证码插件jq 验证码插件jq 验证码插件jq 验证码插件jq 验证码插件
js,jq对json对象增,删,改,查操作,对json对象增加,修改,删除,查询操作 文章地址:https://blog.csdn.net/cplvfx/article/details/80480461
用JQ+swiper+原生手写picker+map标签图片地图制作成的电子周刊,可以点击周刊图片的某个局域进行跳转
JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果
NULL 博文链接:https://snandy.iteye.com/blog/574932
NULL 博文链接:https://onestopweb.iteye.com/blog/2365648
选项卡切换,包括js原生的和 jquery两种方式的 tab选项卡切换
jq安装包rpm.rar
面试问题讲解原生JS JQ面试(讲解视频)提取方式是百度网盘分享地址