jQuery学习-事件之绑定事件(五)
大家应该还记得dispatch方法中有这么一段代码:
event = jQuery.event.fix( event );
event的修复是在fix这个方法中的,而在fix中是通过 new jQuery.Event( originalEvent )来重新构建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;
}
},
今天有些焦躁,唉!
转载于:https://www.cnblogs.com/urols-jiang/p/4324608.html
jQuery学习-事件之绑定事件(五)相关推荐
- jQuery向未来的元素添加事件处理程序(绑定事件)
2019独角兽企业重金招聘Python工程师标准>>> jQuery向未来的元素添加事件处理程序 ,使用 delegate() 方法向尚未创建的元素添加事件处理程序(绑定事件) $( ...
- JQuery在循环中绑定事件的问题详解
JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...
- 【JQuery】on/off 绑定事件和解绑事件
前言 on 绑定事件.off 解绑事件 on 添加事件.off 删除事件 JQuery on() 方法 on() 方法在被选元素及子元素上添加一个或多个事件处理程序. 自 jQuery 版本 1.7 ...
- Jquery的on方法绑定事件
$(selector).on('events',fn) events:一个或多个用空格分隔的事件类型 selector:元素的子元素选择器 fn:回调函数,即绑定在元素身上的侦听函数 1.on方法可以 ...
- IE和DOM事件流、普通事件和绑定事件的区别
IE和DOM事件流的区别 IE采用冒泡型事件 Netscape(网络信息浏览器)使用捕获型事件 DOM使用先捕获后冒泡型事件 示例: <body> <div> <butt ...
- 解决jquery的多次绑定事件
最近在写一个网站的过程中,混合使用了updatepanel与jquery,发现只要updatepanel刷新一次,执行事件的次数就会加一,将代码改为如下解决: $("#btnLocation ...
- 对jquery新增加的class绑定事件 jquery 对相同class 绑定事件
当页面加载时,就会注册所有的事件,后面通过jquery新增的内容(<div class="item"></div>),再对新增的添加事件$(".i ...
- jQuery:删除元素绑定事件
$('#page21MainContain').css("pointer-events", "none");
- 小汤学编程之jQuery学习day03——事件、效果、插件
一.事件 1.绑定事件 2.解绑事件 二.效果 1.基本效果 2.淡入淡出 3.自定义效果 三.插件 1.下载地址 2.语法 3.常用的校验 4.案例 ...
- 【JavaLearn】(22)jQuery介绍、选择器、事件、动画、DOM编程、操作CSS、表单验证
目录 1. jQuery定义和特点 1.1 jQuery 入门 1.2 jQuery对象和DOM对象 2. jQuery 选择器 2.1 基本选择器 2.2 属性选择器 2.3 位置选择器 2.4 表 ...
最新文章
- Adobe与Facebook联手推出Flash开发工具
- SPOJ - LCS Longest Common Substring(后缀自动机)
- php,Allowed memory size of 8388608 bytes exhausted (tried to allocate 1298358 bytes)
- php 错误 异常,php中的异常和错误解析
- thinkphp命名空间
- java反射技术_java反射技术,逆向开发必备技能
- 82c55单片机c语言,AT89S51单片机与82C55的接口设计编程
- 编程学习好去处:35 个快速学习的编程网站
- 【转】Sections Headers for Android ListViews
- jquery-pager的使用
- libpng12.so.0:没有那个文件或目录
- SOA渐行渐近-怎样给IT系统一个新视角?
- LU分解_SVD分解
- 赠人玫瑰,手有余香, 下面请听仙居义工专题报道
- C专家编程 第9章 再论数组 9.6 C语言的多维数组
- Causal Representation Learning for Out-of-Distribution Recommendation
- czl蒻蒟的OI之路
- 计算机下桌面显示不出来,电脑桌面文档不会在右边显示出来怎么办
- python+OpenCV笔记(二十四):Shi-Tomasi角点检测
- linux私房菜高级,别人的Linux私房菜(15)磁盘配额与高级文件系统管理
热门文章
- 以太坊交易的打包规则
- 区块链 什么是DAPP
- Kubernetes 小白学习笔记(18)--集群存储-volume、PV、PVC
- 微信小程序云开发教程-微信小程序的JS基础-事件响应与视图层数据获取
- 基于SSM的二手交易平台
- delphi ehlib 添加选择框_教你用CASS10.1,在宗地图中添加“亩”注记
- 如何用JAVAC一次性编译多个包下的JAVA文件 ;JAVA和JAVAC 命令行;java 带有包名编译并运行,附带外部依赖jar包运行
- 2.15.PHP7.1 狐教程-【PHP 抽象类、抽象方法】
- Java 开发流程、运行原理、JVM 规范与实现
- 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_11-修改页面-前端-Api调用...