论坛首页 Web前端技术论坛

读jq之八(原生事件对象的修复及扩充)

浏览 3944 次
精华帖 (0) :: 良好帖 (8) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-12-04   最后修改:2010-12-04

由于各个浏览器中原生事件对象的 差异性 ,多数 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;
	// 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 )。这一点我在 读jq之七  各浏览器中鼠标按键值的差异 做了详细分析。



好了,整个jQuery事件对象就是如此..

以上源码摘自 jQuery1.4.4

 

   发表时间:2010-12-07  
项目中正用jquery,分析的很好。
0 请登录后投票
   发表时间:2010-12-10  
zhouyrt,去知识库搞个专栏吧
0 请登录后投票
   发表时间:2011-07-21  
呵呵,javascript中没有类,只有对象啊。
其实对象不一定需要类的支持!
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics