jQuery源码学习（版本1.11）-事件处理-jQuery事件对象

概述

本文详细分析jquery-1.11.1.js源码文件行数：4908~4997；

代码简介：构造函数jQuery.Event用于创建jQuery事件对象实例，jQuery.Event.fn为其原型。jQuery事件对象是jQuery各种事件处理方法中使用的模型，里面对原生事件模型进行了包装，解决了一些兼容性问题，增加了一些属性强化事件对象的功能；

下文进行详细代码分析。

jQuery.Event

// 构造函数
jQuery.Event = function( src, props ) {
	// 兼容不使用new的初始化方式（实际表明所有jQuery.Event都是通过new生成的对象）
	if ( !(this instanceof jQuery.Event) ) {
		return new jQuery.Event( src, props );
	}

	// src是原生事件对象，里传进来type，以及其他各种参数
	if ( src && src.type ) {
		// 引用原生事件对象到新事件对象中
		this.originalEvent = src;
		this.type = src.type;

		// 设置isDefaultPrevented方法，src有则用里面的，没有则根据条件设置为returnTrue或returnFalse
		this.isDefaultPrevented = src.defaultPrevented ||
				src.defaultPrevented === undefined &&
				src.returnValue === false ?
			returnTrue :
			returnFalse;

	// src里面没有type属性，则直接让type等于src
	} else {
		this.type = src;
	}

	// 将props作为事件另外扩展的属性扩展进新事件对象
	// 注意这里props是一个对象，具体需要扩展的属性在对象里面
	if ( props ) {
		jQuery.extend( this, props );
	}

	// 创建时间戳
	this.timeStamp = src && src.timeStamp || jQuery.now();

	// 设置JQ版本标志
	this[ jQuery.expando ] = true;
};

// jQuery.Event是基于ECMAScript标准的DOM3级事件开发的
jQuery.Event.prototype = {
	// 定义三个函数属性，值全是returnFalse
	isDefaultPrevented: returnFalse,
	isPropagationStopped: returnFalse,
	isImmediatePropagationStopped: returnFalse,

	// jQuery.Event的preventDefault方法
	preventDefault: function() {
		// 获取原生事件对象
		var e = this.originalEvent;

		// 表示已经执行过preventDefault
		this.isDefaultPrevented = returnTrue;
		if ( !e ) {
			return;
		}

		// 原生事件对象存在preventDefault，则直接执行
		if ( e.preventDefault ) {
			e.preventDefault();

		// 兼容IE，IE的原生事件是通过returnValue设置为false，才阻止事件默认行为的
		} else {
			// 设置原生事件的returnValue为false
			e.returnValue = false;
		}
	},
	// jQuery.Event的stopPropagation方法
	stopPropagation: function() {
		// 获取原生事件对象
		var e = this.originalEvent;

		// 表示已经执行过stopPropagation
		this.isPropagationStopped = returnTrue;
		if ( !e ) {
			return;
		}
		// 存在使用原生事件的stopPropagation
		if ( e.stopPropagation ) {
			e.stopPropagation();
		}

		// 兼容IE，设置cancelBubble为true;
		e.cancelBubble = true;
	},
	// stopImmediatePropagation的作用是使阻止事件冒泡的同时，阻止该元素绑定的该事件类型的其他回调函数的执行
	stopImmediatePropagation: function() {
		// 获取原生事件对象
		var e = this.originalEvent;

		this.isImmediatePropagationStopped = returnTrue;

		// 存在使用原生事件的stopImmediatePropagation，IE应该是没有这个功能的
		if ( e && e.stopImmediatePropagation ) {
			e.stopImmediatePropagation();
		}

		// 这里应该是稍微兼容一下IE，对于IE就调用stopPropagation即可
		this.stopPropagation();
	}
};