jQuery学习-事件之绑定事件(五)
大家应该还记得dispatch方法中有这么一段代码:
event = jQuery.event.fix( event );
event的修复是在fix这个方法中的,而在fix中是通过 new jQuery.Event( originalEvent )来重新构建event对象的,
同时还修复了一些属性值,请看
fix: function( event ) { if ( event[ jQuery.expando ] ) {//如果event已经被修正则直接返回 return event; } // Create a writable copy of the event object and normalize some properties var i, prop, copy, type = event.type, originalEvent = event, fixHook = this.fixHooks[ type ]; /* 获取需从原生event对象获取的属性值 fixHooks中看看有没有对应事件类型的修正 如果没有,则从mouseHooks或者是keyhooks中取,如果都没有就设置为空对象 * */ if ( !fixHook ) { this.fixHooks[ type ] = fixHook = rmouseEvent.test( type ) ? this.mouseHooks : rkeyEvent.test( type ) ? this.keyHooks : {}; } //需要复制的属性key数组 copy = fixHook.props ? this.props.concat( fixHook.props ) : this.props; event = new jQuery.Event( originalEvent );//新建jQuery的event对象 /* 从原生event对象赋值属性到新event对象 * */ i = copy.length; while ( i-- ) { prop = copy[ i ]; event[ prop ] = originalEvent[ prop ]; } // Support: IE<9 // Fix target property (#1925) //修正event.target if ( !event.target ) { event.target = originalEvent.srcElement || document; } // Support: Chrome 23+, Safari? // Target should not be a text node (#504, #13143) /* 如果event.target为文本节点则target指向其父节点 * */ if ( event.target.nodeType === 3 ) { event.target = event.target.parentNode; } // Support: IE<9 // For mouse/key events, metaKey==false if it's undefined (#3368, #11328) /* * 如果.metaKey == undefined 则返回false * 这是以一种巧妙的写法 * !!undefined ==> false * !!null ==> false * !!"" ==> false * !!"a" ==> true */ event.metaKey = !!event.metaKey; return fixHook.filter ? fixHook.filter( event, originalEvent ) : event; }, mouseHooks: { props: "button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "), filter: function( event, original ) { var body, eventDoc, doc, button = original.button, fromElement = original.fromElement; // Calculate pageX/Y if missing and clientX/Y available /* 修正pageX,pageY属性值 * */ if ( event.pageX == null && original.clientX != null ) { eventDoc = event.target.ownerDocument || document; doc = eventDoc.documentElement; body = eventDoc.body; event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 ); event.pageY = original.clientY + ( doc && doc.scrollTop || body && body.scrollTop || 0 ) - ( doc && doc.clientTop || body && body.clientTop || 0 ); } /* 修正relatedTarget 该值为触发事件时的来源元素 * */ // Add relatedTarget, if necessary if ( !event.relatedTarget && fromElement ) { event.relatedTarget = fromElement === event.target ? original.toElement : fromElement; } // Add which for click: 1 === left; 2 === middle; 3 === right // Note: button is not normalized, so don't use it /* 修正which属性,鼠标左键,右键,中键 chrome:1 === left; 2 === middle; 3 === right ie没有which只有button 1 === left === (button == 1); 2 === middle === (button == 4); 3 === right === (button == 2) * */ if ( !event.which && button !== undefined ) { event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) ); } return event; }
},
今天有些焦躁,唉!
jQuery学习-事件之绑定事件(五)的更多相关文章
- jQuery学习-事件之绑定事件(三)
在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event ...
- jQuery学习-事件之绑定事件(二)
在上一篇<jQuery学习-事件之绑定事件(一)>我们了解了jQuery的add方法,今天我们来学习下dispatch方法: dispatch: function( event ) { ...
- jQuery学习-事件之绑定事件(一)
我们都知道jQuery的事件其思想来源于Dean Edwards的addEvent,通过源码我们知道jQuery在为元素绑定事件时,每种类型的事件(click,blur)时只绑定了一次对应类型的事件处 ...
- jQuery如何给body绑定事件?
jQuery如何给body绑定事件? 代码如下: $(document).bind("resize", function () { alert("php-note.com ...
- JQuery在循环中绑定事件的问题详解
JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...
- jQuery学习小结1-CSS操作+事件
一.DOM对象和jQuery 对象互换 1.jQuery对象 就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,其可以使用jQuery里的方法.比如: $(&quo ...
- jQuery相关方法7----各种事件和绑定事件
一.jQuery事件 1.鼠标事件 click与dbclick事件 click事件其实是由mousedown与mouseup 2个动作构成,所以点击的动作只有在松手后才触发 $ele.click(): ...
- jquery学习笔记(三):事件和应用
内容来自[汇智网]jquery学习课程 3.1 页面加载事件 在jQuery中页面加载事件是ready().ready()事件类似于就JavaScript中的onLoad()事件,但前者只要页面的DO ...
- [jquery]高级篇--js绑定事件
参考: http://www.cnblogs.com/leejersey/p/3545372.html jQuery on()方法是官方推荐的绑定事件的一个方法.$(selector).on(eve ...
- jquery html 动态添加元素绑定事件
由于实际的需要,有时需要往网页中动态的插入HTML内容,并在插入的节点中绑定事件处理函数.我们知道,用Javascript向HTML文档中 插入内容,有两种方法, 一种是在写HTML代码写入JS,然后 ...
随机推荐
- Hello又大了一岁
时间就这样子过了一年一年一年一年一年...一年一年一年......... 以往每年的生日,都习惯安静的猫在一个地方.时间流逝,更像是一种默默的悼念. 也许从28岁开始,我得习惯用逗比的心态欢迎.长大的 ...
- ASP.NET Core Web开发学习笔记-1介绍篇
ASP.NET Core Web开发学习笔记-1介绍篇 给大家说声报歉,从2012年个人情感破裂的那一天,本人的51CTO,CnBlogs,Csdn,QQ,Weboo就再也没有更新过.踏实的生活(曾辞 ...
- jQuery工具函数下
测试操作 1.判断是否为数组对象 $(function () { //判断是否为数组对象 var arr = [1,2,3,4]; alert($.isArray(arr));//true }); 2 ...
- 高性能WEB开发 为什么要减少请求数,如何减少请求数!
http请求头的数据量 [声明] 转载 原文出处:http://www.blogjava.net/BearRui/. 谢谢我们先分析下请求头,看看每次请求都带了那些额外的数据.下面是监控的googl ...
- RESTful API实现
RESTful API实现 ASP.NET Core Web API 开发-RESTful API实现 REST 介绍: 符合REST设计风格的Web API称为RESTful API. 具象状态传输 ...
- MYSQL 加密的 3 类方法
背景: 若你想要储存一些由可能包含任意字节值的加密函数返回的结果,使用BLOB列而不是 CHAR 或VARCHAR 列,从而避免由于结尾空格的删除而改变一些数据值的潜在问题. 这一句话来自官方文件,记 ...
- MEMS陀螺仪(gyroscope)的工作原理
传统的陀螺仪主要是利用角动量守恒原理,因此它主要是一个不停转动的物体,它的转轴指向不随承载它的支架的旋转而变化. 但是MEMS陀螺仪(gyroscope)的工作原理不是这样的,因为要用微机械技术在硅片 ...
- QListWidget与QTableWidget的使用以及样式设置
QListWidget和QTableWidget的使用和属性,QTableWidget和QListWidget样式表的设置,滚动条的样式设置 一.QListWidget的使用 //一.QListWid ...
- C# 如何获取当前应用程序的父目录
//获取当前运行路径的上级目录(父目录) System.IO.DirectoryInfo topDir = System.IO.Directory.GetParent(System.Environme ...
- web开发(Java&Jquery)实现验证码
1. Ajax Fancy Capcha 一个支持 Ajax 又很炫的 jQuery Captcha 插件,它使用了很人性化的验证机制. from : http://www.webdesignbe ...