读jQuery之八 包装事件对象

  比如,停止事件冒泡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;

  // Events bubbling up the document may have been marked as prevented

  // by a handler lower down the tree; reflect the correct value.

  this.isDefaultPrevented = (src.defaultPrevented || src.returnValue === false ||

  src.getPreventDefault && src.getPreventDefault()) ? returnTrue : returnFalse;

  // 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 )。这一点我在 读jQuery之七 及 各浏览器中鼠标按键值的差异 做了详细分析。

  最后,给zChain.js添加包装事件对象的相关代码。

  zChain-0.7.1.js