由于各个浏览器中原生事件对象的 差异性 ，多数 JS库/框架 都或多或少的对原生事件对象进行了修复及包装。
比如，停止事件冒泡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.htmljQuery.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 类主要做了以下工作
- 扩充了 originalEvent 属性，该属性暂存了原生事件对象
- 修复了 ，该属性IE6/7/8不支持，其它支持的各个浏览器中返回值也不同
- 阻止DOM元素默认行为统一采用 preventDefault
- 停止事件冒泡统一采用 stopPropagation
- 实现或扩充了 的几个方法：stopImmediatePropagation、isDefaultPrevented、isPropagationStopped、isImmediatePropagationStopped
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 ）。这一点我在 及 做了详细分析。
最后，给z.js添加包装事件对象的相关代码。
相关：