读jQuery之八，包装事件对象

2023-11-08 03:57•java•阅读 2624

http://www.cnblogs.com/snandy/archive/2011/06/17/2081213.html

由于各个浏览器中原生事件对象的差异性，多数 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 ) {

returnnewjQuery.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;

};

functionreturnFalse() {

returnfalse;

}

functionreturnTrue() {

returntrue;

}

// 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;

vare =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;

vare =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 属性，该属性暂存了原生事件对象
修复了 timeStamp ，该属性IE6/7/8不支持，其它支持的各个浏览器中返回值也不同
阻止DOM元素默认行为统一采用 preventDefault
停止事件冒泡统一采用 stopPropagation
实现或扩充了 DOM3事件的几个方法：stopImmediatePropagation、isDefaultPrevented、isPropagationStopped、isImmediatePropagationStopped

此外，jQuery.Event的写类方式也较独特。它使用隐藏的new创建对象。

jQuery.event.fix方法如下

fix:function( event ) {

if( event[ jQuery.expando ] ) {

returnevent;

}

// store a copy of the original event object

// and "clone" to set read-only properties

varoriginalEvent = event;

event = jQuery.Event( originalEvent );

for(vari =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) {

vardoc = 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 ) ));

}

returnevent;

},

它主要做了以下工作

1，event = jQuery.Event( originalEvent ); 该句创建了一个jQuery.Event类的实例对象，该对象修复及扩充上面刚刚提到了。

2，一个循环将原生事件对象的所有属性拷贝给 1 中的event对象。

for(vari =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之七及各浏览器中鼠标按键值的差异做了详细分析。

http://www.cnblogs.com/snandy/archive/2011/06/17/2081213.html

由于各个浏览器中原生事件对象的差异性，多数 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 ) {

returnnewjQuery.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;

};

functionreturnFalse() {

returnfalse;

}

functionreturnTrue() {

returntrue;

}

// 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;

vare =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;

vare =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 属性，该属性暂存了原生事件对象
修复了 timeStamp ，该属性IE6/7/8不支持，其它支持的各个浏览器中返回值也不同
阻止DOM元素默认行为统一采用 preventDefault
停止事件冒泡统一采用 stopPropagation
实现或扩充了 DOM3事件的几个方法：stopImmediatePropagation、isDefaultPrevented、isPropagationStopped、isImmediatePropagationStopped

此外，jQuery.Event的写类方式也较独特。它使用隐藏的new创建对象。

jQuery.event.fix方法如下

fix:function( event ) {

if( event[ jQuery.expando ] ) {

returnevent;

}

// store a copy of the original event object

// and "clone" to set read-only properties

varoriginalEvent = event;

event = jQuery.Event( originalEvent );

for(vari =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) {

vardoc = 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 ) ));

}

returnevent;

},

它主要做了以下工作

1，event = jQuery.Event( originalEvent ); 该句创建了一个jQuery.Event类的实例对象，该对象修复及扩充上面刚刚提到了。

2，一个循环将原生事件对象的所有属性拷贝给 1 中的event对象。

for(vari =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之八，包装事件对象

相关推荐

JavaScript DOM对象与Jquery对象的互转

PHP数据结构之八 树与二叉树基本概念

JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target？

JavaScript 包装对象

【读书笔记】读《JavaScript设计模式》之适配器模式

【读书笔记】读《JavaScript设计模式》之装饰者模式

回归JavaScript基础，八

JavaScript操作DOM与jQuyer操作DOM的对比

PHP数据结构之八树与二叉树基本概念