jQuery源码学习（版本1.11）-事件处理-整体架构

概述

jquery-1.11.1.js版本的事件处理块的代码主要在4273到5269行之间，核心是运用了data缓存，增加事件监听时，在每一个JQ对象的data缓存中都保存一个对象map（事件类型-回调数组），事件触发后，会遍历执行回调数组里的每一个回调，移除监听，则是删除对应缓存里的回调或事件类型，以上三种场景构成整一个jQuery事件处理流程。

代码结构

1.jQuery事件处理工具函数

// 事件管理的工具函数
jQuery.event = {

	global: {},
	
	// 绑定事件函数
	add: function() {},
	
	// 移除事件函数
	remove: function() {},
	
	// 主动触发事件函数
	trigger: function() {},

	// 事件分发函数
	dispatch: function() {},
	
	// 修复jQuery.Event对象的函数
	fix: function() {},
	
	// 包含一些事件常用属性，让KeyEvent和MouseEvent共享
	// 新建JQ事件对象的时候，这些属性就会被扩展进去
	props: "altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),
	
	// fix的勾子，应该是提供自定义勾子使用的，如果不存在的话，fix方法里面会使用keyHooks跟mouseHooks
	fixHooks: {},
	
	// 键盘事件勾子
	keyHooks: {},
	
	// 鼠标事件勾子
	mouseHooks: {},
	
	// 特殊事件类型的一些属性跟方法，这些属性跟方法均在前面的jQuery.event中被使用到，应该可以看做是跟勾子类似的对象
	special: {},
	
	// simulate这个方法暂时也是不理解其用途
	// 貌似是模仿一些具体类型的事件，然后触发
	simulate: function() {}
};

// 删除事件监听，在jQuery.event.remove里会用到
jQuery.removeEvent = function() {};

2.jQuery事件对象

// 构造函数
jQuery.Event = function( src, props ) {};

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

	// jQuery.Event的preventDefault方法
	preventDefault: function() {},

	// jQuery.Event的stopPropagation方法
	stopPropagation: function() {},

	// stopImmediatePropagation的作用是使阻止事件冒泡的同时，阻止该元素绑定的该事件类型的其他回调函数的执行
	stopImmediatePropagation: function() {}
};

3.jQuery事件处理实例函数

// 实例对象的事件处理方法
jQuery.fn.extend({

	// 绑定事件方法on（参数one仅限是内部使用，JQ实例对象需要的话可以直接调用后面的one方法）
	on: function( ) {},
	
	// one方法，表明事件回调只处理一次
	one: function( types, selector, data, fn ) {},
	
	// 解除事件绑定off
	off: function() {},

	// 触发事件方法trigger
	trigger: function() {},
	
	// 会影响到前面event.isTrigger的值，用途暂时不明
	triggerHandler: function() {}
});

流程简介

工具函数无疑是服务于实例函数的，每个JQ实例对象都可以调用on，off，trigger等方法去执行相应的事件处理操作，实例函数最终调用工具函数实现功能，而jQuery.Event则是jQuery工具函数处理事件时用到的模型，关系可简化如下：

<pre name="code" class="javascript">jQuery.fn.on|off|trigger  ->  <span style="font-family: Arial, Helvetica, sans-serif;">jQuery.event.add|remove|triiger(jQuery.Event)</span>