dojo事件机制详解(一)

概述

dojo中的事件实现并不复杂，当然我只是从代码量的角度出发，但含金量还是很高的，而且很容易实现自定义事件监听，还支持发布订阅模式，下面我们从源代码级别来看看
dojo中的事件机制是如何实现的，深入了解后，甚至可以将其拷贝出来直接就能在其它使用。
事件机制使用中主要涉及以下4个函数：
1. dojo.connect(); 建立事件监听连接
2. dojo.disconnect(); 断开事件监听连接
3. dojo.publish(); 发布主题
4. dojo.subscribe(); 订阅主题
5. dojo.unsubscribe(); 取消订阅主题
该篇中先讲connect机制，而发布订阅实现中也使用到了connect机制，将在后一篇中讲解。

示例

讲解之前先看一个示例：

function Foo() {
	this.name = "Foo";
	this.output = function() {
		var result = "output function in " + this.name;
		console.info(result);
		return result;
	};
}

function Bar() {
	this.name = "Bar";
	this.output = function() {
		var result = "output function in " + this.name;
		console.info(result);
		return result;
	}
}

var foo = new Foo();
var bar = new Bar();

//非dom node事件监听
var handle = dojo.connect(foo, "output", bar, "output");
foo.output();	//会触发bar.output调用
dojo.disconnect(handle);	//断开连接

//为dom node添加事件监听
handle = dojo.connect(dojo.byId("someId"), "click", function(){
	// do something
});
//移除事件监听
dojo.disconnect(handle);

dojo._listener对象

在讲解connect机制之前，必须先理解dojo._listener对象，该对象是处理非dom node的事件通用机制关键实现，具体如下：

dojo._listener = {
	// 创建一个分发器函数，该函数的返回值也是一个函数
	getDispatcher: function(){
		return function(){
			// c就是当前这个匿名函数，其_listeners和target属性会在add函数进行设置，分别表示目标函数的监听器列表和目标函数
			// 目标函数就是被监听的函数，被监听的函数被调用时触发监听器列表中的函数调用
			var ap = Array.prototype, c = arguments.callee, ls = c._listeners, t = c.target,
			// 将原目标函数返回值作为该匿名函数返回值
				r = t && t.apply(this, arguments),	//调用目标函数
			// make local copy of listener array so it is immutable during processing
			// 拷贝出一份监听器列表副本，其目的是保证在对其遍历过程中列表中的元素不会发生变化
			// 因为有可能出现的情况是：正在遍历监听器列表并对其调用，而其它地方却正在移除监听器
				i, lls = [].concat(ls)
			;

			// invoke listeners after target function
			// 在原目标函数调用后，再依次调用各个监听器
			for(i in lls){
				if(!(i in ap)){
					// 注意this，this指向的是调用原目标函数的那个对象，且监听器函数与匿名函数参数是一样的
					lls[i].apply(this, arguments);
				}
			}
			// 返回原目标函数返回值
			return r;
		};
	},
	//为源对象添加一个监听器，由参数名称可知source为源对象，method为函数名称，listener就监听器(回调函数)
	add: function(/*Object*/ source, /*String*/ method, /*Function*/ listener){
		// 如果source不存在则赋值为window
		source = source || dojo.global;
		// The source method is either null, a dispatcher, or some other function
		var f = source[method];
		// Ensure a dispatcher
		// f函数不可能为null，而且在第一次注册事件监听时，f._listeners不存在
		if(!f || !f._listeners){
			// 得到一个分发器函数，就是getDispatcher返回的那个匿名函数，此时该匿名并没有被调用
			var d = dojo._listener.getDispatcher();
			// original target function is special
			//将target属性赋值为原目标函数
			d.target = f;
			// 初始化一个空监听器列表
			d._listeners = [];
			// 重定义向原目标函数至分发器函数，所以在调用原目标函数的时候，真正调用的是这个分发器函数，
			// 也就是getDispatcher返回的那个匿名函数，只有这样能会触发监听器函数的调用过程
			f = source[method] = d;
		}

		// 将监听器添加至列表，返回该监听器在监听器列表中的位置(index+1)
		return f._listeners.push(listener); /*Handle*/
	},
	// 从源对象移除一个监听器，由参数名称可知source为源对象，method为函数名称，handle为监听句柄
	remove: function(/*Object*/ source, /*String*/ method, /*Handle*/ handle){
		// 获取分发器函数
		var f = (source || dojo.global)[method];
		// 因为handle值为index+1，所以handle值大于0才有效，且监听器索引值为handle-1
		if(f && f._listeners && handle--){
			// 从监听器列表中移除监听器
			delete f._listeners[handle];
		}
	}
};

del对象

del对象是处理dom node事件机制实现，这个就很简单了，分别调用addEventListener与removeEventListener即可。

var del = (dojo._event_listener = {
	add: function(/*DOMNode*/ node, /*String*/ name, /*Function*/ fp){
		// 省略一些代码...
		
		// 为dom node添加事件监听器
		node.addEventListener(name, fp, false);
		return fp; /*Handle*/
	},
	remove: function(/*DOMNode*/ node, /*String*/ event, /*Handle*/ handle){
		if(node){
			event = del._normalizeEventName(event);
			if(!dojo.isIE && (event == "mouseenter" || event == "mouseleave")){
				event = (event == "mouseenter") ? "mouseover" : "mouseout";
			}
			// 从dom noe移除事件监听器
			node.removeEventListener(event, handle, false);
		}
	}
	// 省略了一些在add、remove函数中使用到的函数，处理浏览器兼容性相关问题，忽略它们并不妨碍理解事件机制
});

dojo.connect

解理了上面的内容后，再看connect与disconnect函数就很简单了：

dojo.connect = function(/*Object|null*/ obj,
						/*String*/ event,
						/*Object|null*/ context,
						/*String|Function*/ method,
						/*Boolean?*/ dontFix){

	var a=arguments, args=[], i=0;
	// if a[0] is a String, obj was omitted
	//如果第一个参数是String类型，则忽略obj参数
	args.push(dojo.isString(a[0]) ? null : a[i++], a[i++]);
	// if the arg-after-next is a String or Function, context was NOT omitted
	var a1 = a[i+1];
	// 如果第三个参数是String或Function类型，则忽略context参数
	// 处理这些参数的目的就是方便参数的传递，有点函数重载的感觉
	args.push(dojo.isString(a1)||dojo.isFunction(a1) ? a[i++] : null, a[i++]);
	for(var l=a.length; i<l; i++){	args.push(a[i]); }
	// 调用_connect函数
	return dojo._connect.apply(this, args); /*Handle*/
}

// node_listener就是dojo._listener，只是在IE中因为一些IE自身的差异与问题需要特殊对待，这里就忽略这一特殊情况
var node_listener = dojo._listener;
// 在dojo.js文件中定义了两个_connect函数，前面一个是针对通用环境的，后一个是针对浏览器环境的，明显后一个(如下)有效
dojo._connect = function(obj, event, context, method, dontFix){
	//判断obj是否为dom node对象
	var isNode = obj && (obj.nodeType||obj.attachEvent||obj.addEventListener);
	// 如果是dom node并且dontFix为true，则索引为2，即事件机制对象为dojo._listener
	// 如果是dom node并且dontFix为fale，则索引为1，即事件机制对象为del
	// 如果不是dom node，则索引为0，即事件机制对象为dojo._listener
	var lid = isNode ? (dontFix ? 2 : 1) : 0, l = [dojo._listener, del, node_listener][lid];
	// 创建一个监听器
	var h = l.add(obj, event, dojo.hitch(context, method));

	//通过h，能够知道该监听器在监听器列表中的索引
	//通过lid，则知道使用的是哪一个事件机制对象
	//返回一个相关信息数组，用于移除监听(断开连接)使用
	return [ obj, event, h, lid ];
};

dojo.disconnect

dojo.disconnect = function(/*Handle*/ handle){
	// handle参数就是connect函数的返回值，为一个数组
	if(handle && handle[0] !== undefined){
		//调用_disconnect函数
		dojo._disconnect.apply(this, handle);
		// 断开连接后，删除对象引用
		delete handle[0];
	}
};


dojo._disconnect = function(obj, event, handle, listener){
	// 该函数的四个参数分别对应了connect函数返回值数组中的四个元素
	// 调用对应的事件机制对象的remove方法移除监听器
	([dojo._listener, del, node_listener][listener]).remove(obj, event, handle);
};

PS:dojo版本为dojo-release-1.6.3