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,然后 ...
随机推荐
- JVM GC之一找出不可达对象并回收
JAVA运行时数据区域 1.程序计数器:当前线程所执行的字节码的行号指示器.一个处理器只会执行一条线程中的指令,为了线程切换后能回复到正确的执行位置,所以每条线程都需要一个独立的计数器.各条线程之间互 ...
- SQL Server 阻塞排除的 2 方法
背景知识: 是什么造成了阻塞? 从锁的观点来看.可访问对象前一定要对对象加锁不管你是读还是写,如果用户A以经持有对象,说明A以在对象上加锁,如果这时B 也想访问这个对象.它也要对对象加锁.重点来了如果 ...
- 混合使用Azure LB和ILB访问相同web服务(1)
在经典的使用场景中,我们一般使用AzureLoadBalancer来面向公网提供负载均衡服务,而使用Azure Internal Load Balancer提供内部那些不愿意将服务暴露给公网的服务,比 ...
- USB Mass Storage大容量存储的基本知识
http://www.crifan.com/files/doc/docbook/usb_disk_driver/release/htmls/ch02_msc_basic.html 目录 2.1. US ...
- STM32F103控制两个步进电机按照一定转速比运动
这个暑假没有回家,在学校准备九月份的电子设计竞赛.今天想给大家分享一下STM32定时器控制两个步进电机按照一定速度比转动的问题. 这次做的05年的电子设计竞赛题目,运动悬挂系统..本实验是控制两个步进 ...
- Logstash type来标记事件类型,通过type判断
/*************** 根据type判断 input { file { type => "zj_frontend_access" path => [" ...
- Chapter 4. Button, Checkbutton, and Radiobutton Widgets 按钮,复选按钮,单选按钮
Chapter 4. Button, Checkbutton, and Radiobutton Widgets 按钮,复选按钮,单选按钮 几乎所有的Perl/Tk 应用使用按钮以这样或者那样的方式 ...
- linux下so动态库一些不为人知的秘密(中二)
继续上一篇< linux下so动态库一些不为人知的秘密(中) >介绍so搜索路径,还有一个类似于-path,叫LD_RUN_PATH环境变量, 它也是把路径编译进可执行文件内,不同的是它只 ...
- 9款超酷的jQuery/CSS3插件
Article From here: http://js.itivy.com/?p=1883 1.jQuery向前滑动切换焦点图 这款jQuery焦点图非常绚丽,切换图片的时候每张图片是向前滑动的,很 ...
- HDU1181 变形课 (回溯法)
变形课 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)Total Submis ...