概述

示例

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对象

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,/*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对象

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

dojo.connect = function(/*Object|null*/ obj,/*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,dojo.hitch(context,method));

	//通过h，能够知道该监听器在监听器列表中的索引
	//通过lid，则知道使用的是哪一个事件机制对象
	//返回一个相关信息数组，用于移除监听(断开连接)使用
	return [ obj,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,listener){
	// 该函数的四个参数分别对应了connect函数返回值数组中的四个元素
	// 调用对应的事件机制对象的remove方法移除监听器
	([dojo._listener,node_listener][listener]).remove(obj,handle);
};