jQuery-1.9.1源码分析系列(十)事件系统之事件包装


Posted in Javascript onNovember 20, 2015

在上篇文章给大家介绍了jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构,本篇继续给大家介绍jquery1.9.1源码分析系列相关知识,具体内容请看下文吧。

首先需要明白,浏览器的原生事件是只读的,限制了jQuery对他的操作。举个简单的例子就能明白为什么jQuery非要构造一个新的事件对象。

在委托处理中,a节点委托b节点在a被click的时候执行fn函数。当事件冒泡到b节点,执行fn的时候上下文环境需要保证正确,是a节点执行了fn而非b节点。如何保证执行fn的上下文环境是a节点的:看源码(红色部分)

//执行
ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler ).apply( matched.elem, args );

使用了apply将执行函数的上下文替换成了a节点(matched.elem)。还有一点args[0]即是事件对象event。又如何保证event是a节点的事件的?这就是event.currentTarget这个重要的属性的功能,所以在执行apply之前还做了一步操作

event.currentTarget = matched.elem;

直接更改事件对象的currentTarget属性,这在浏览器本地事件是做不到的。所以才有了基于本地事件构造jQuery的事件对象。

事件分两种:鼠标事件和键盘事件(不知道触摸事件何时能加进来)。看一下这两者的详细属性

jQuery-1.9.1源码分析系列(十)事件系统之事件包装jQuery-1.9.1源码分析系列(十)事件系统之事件包装

其中有些是浏览器自己的,非W3C标准的。jQuery将事件属性分为三块

鼠标和键盘事件共同拥有的属性jQuery.event.props: "altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" ")

键盘事件专有的属性jQuery.event.keyHooks.props: "char charCode key keyCode".split(" ")

鼠标事件专有的属性jQuery.event.mouseHooks.props: "button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" ")

a. 构造新的事件对象jQuery.event.fix(originalEvent)

构造新的事件对象分三步完成

第一步,使用到event = new jQuery.Event( originalEvent ),构造新事件对象(不明白new的作用的请点击这里),并在创建事件的时候加上isDefaultPrevented、originalEvent、type 、timeStamp和事件已经被修正过的标记(优化使用,避免不必要的处理)。jQuery.Event(src, props)的源码如下

jQuery.Event = function( src, props ) {
  // Allow instantiation without the 'new' keyword
  if ( !(this instanceof jQuery.Event) ) {
    return new jQuery.Event( src, props );
  }
  //src为事件对象
  if ( src && src.type ) {
    this.originalEvent = src;
    this.type = src.type;
    //事件冒泡的文档可能被标记为阻止默认事件发生;这个函数可以反应是否阻止的标志的正确值
    this.isDefaultPrevented = ( src.defaultPrevented || src.returnValue === false ||
      src.getPreventDefault && src.getPreventDefault() ) ? returnTrue : returnFalse;
  //src为事件类型
  } else {
    this.type = src;
  }
  //将明确提供的特征添加到事件对象上
  if ( props ) {
    jQuery.extend( this, props );
  }
  //创建一个时间戳如果传入的事件不只一个
  this.timeStamp = src && src.timeStamp || jQuery.now();
  //标记事件已经修正过
  this[ jQuery.expando ] = true;
};

第一步构造后的事件对象

jQuery-1.9.1源码分析系列(十)事件系统之事件包装

第二步,分辨出当前事件是那种事件,然后将对应的属性一一从浏览器本地事件originalEvent中拷贝过来

 //创建可写的事件对象副本,并格式化一些特征名称
  var i, prop, copy,
    type = event.type,
    originalEvent = event,
    fixHook = this.fixHooks[ type ];
  if ( !fixHook ) {
    this.fixHooks[ type ] = fixHook =
    //rmouseEvent=/^(?:mouse|contextmenu)|click/
    rmouseEvent.test( type ) ? this.mouseHooks :
    //rkeyEvent=/^key/
    rkeyEvent.test( type ) ? this.keyHooks :
    {};
  }
//获得要从原生事件中拷贝过来的属性列表
  copy = fixHook.props ? this.props.concat( fixHook.props ) : this.props;

...

//将原生的属性都拷贝到新的事件上
  i = copy.length;
  while ( i-- ) {
    prop = copy[ i ];
    event[ prop ] = originalEvent[ prop ];
  }

第三步,相关属性的兼容处理

// IE<9修正target特征值
  if ( !event.target ) {
    event.target = originalEvent.srcElement || document;
  }
  // Chrome 23+, Safari?,Target特征值不能是文本节点
  if ( event.target.nodeType === 3 ) {
    event.target = event.target.parentNode;
  }
  // IE<9,对于鼠标/键盘事件, 如果metaKey没有定义则设置metaKey==false
  event.metaKey = !!event.metaKey;
  //调用hooks的filter
  return fixHook.filter ? fixHook.filter( event, originalEvent ) : event;

最后那句代码针对鼠标事件和键盘事件做兼容适配处理。

fixHook.filter可能是jQuery.event.keyHooks.filter

keyHooks.filter: function( event, original ) {
  //给键盘事件添加which特征值
  if ( event.which == null ) {
    event.which = original.charCode != null ? original.charCode : original.keyCode;
  }
  return event;
}

或这jQuery.event.mouseHooks.filter

mouseHooks.filter: function( event, original ) {
  var body, eventDoc, doc,
button = original.button,

fromElement = original.fromElement;
  //如果事件pageX/Y特征不见了,用可用的clientX/Y来计算出来
  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特征
  if ( !event.relatedTarget && fromElement ) {
    event.relatedTarget = fromElement === event.target ? original.toElement : fromElement;
  }
  //添加点击事件which特征值: 1 === left; 2 === middle; 3 === right
  //备注:button不标准,因此不要是使用
  if ( !event.which && button !== undefined ) {
    event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) );
  }
  return event;
}

构建完成的最新事件对象如下(以鼠标事件为例)

jQuery-1.9.1源码分析系列(十)事件系统之事件包装

原生的事件保存在了originalEvent中,target保存了目标节点(委托的节点、事件源),其他信息略过

b. 重载事件方法

构建新的事件对象event = new jQuery.Event( originalEvent )时,事件会继承jQuery.event.prototype中的方法。来看一看有哪些方法

jQuery-1.9.1源码分析系列(十)事件系统之事件包装

前面分析了jQuery.event.prototype中重载了stopPropagation方法的作用:处了调用事件对象的阻止冒泡方法以外,还有一个作用就是被委托节点有多个被委托事件处理等待处理时,其中一个事件调用了event.stopPropagation()将阻止后续事件处理的执行。点击这里搜索关键字查看

preventDefault函数也是有类似的作用。preventDefault函数中增加了这段代码

this.isPropagationStopped = returnTrue;

在触发事件trigger函数和模拟冒泡simulate函数中都会根据isPropagationStopped()判断是否要执行DOM节点的默认操作。源码如下

isImmediatePropagationStopped是stopPropagation特殊用法,isImmediatePropagationStopped会直接阻止掉当前的处理和后面等待执行的事件处理,而stopPropagation会执行完当前的处理,然后阻止后面等待执行的事件处理。

源码如下

// jQuery.Event基于DOM事件所指定的ECMAScript语言绑定
// http://www.w.org/TR//WD-DOM-Level--Events-/ecma-script-binding.html
jQuery.Event.prototype = {
isDefaultPrevented: returnFalse,

isPropagationStopped: returnFalse,

isImmediatePropagationStopped: returnFalse,

preventDefault: function() {


var e = this.originalEvent;


this.isDefaultPrevented = returnTrue;


if ( !e ) {return; }


if ( e.preventDefault ) {



e.preventDefault();


//IE支持


} else {



e.returnValue = false;


}

},

stopPropagation: function() {


var e = this.originalEvent;


this.isPropagationStopped = returnTrue;


if ( !e ) {return; }


if ( e.stopPropagation ) {



e.stopPropagation();


}


// IE支持


e.cancelBubble = true;

},

stopImmediatePropagation: function() {


this.isImmediatePropagationStopped = returnTrue;


this.stopPropagation();

}
}

以上就是本文给大家介绍的jQuery-1.9.1源码分析系列(十)事件系统之事件包装,希望大家喜欢。

Javascript 相关文章推荐
javascript 添加和移除函数的通用方法
Oct 20 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 Javascript
js实现全选和全不选功能
Jul 28 Javascript
Jquery ajax基础教程
Nov 20 #Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 #Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 #Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 #Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 #Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 #Javascript
jquery实现手风琴效果
Nov 20 #Javascript
You might like
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
jquery键盘事件介绍
2011/01/31 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
js中replace的用法总结
2013/12/27 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
Vue中的字符串模板的使用
2018/05/17 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
wxPython窗口中文乱码解决方法
2014/10/11 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
Python 转义字符详细介绍
2017/03/21 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
tensorflow自定义激活函数实例
2020/02/04 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
一个精品风格的世界:Atterley
2019/05/01 全球购物
酒店保安员岗位职责
2014/01/31 职场文书
协议书格式
2014/04/23 职场文书
佛光寺导游词
2015/02/10 职场文书