概述
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,/*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,/*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);
};
PS:dojo版本为dojo-release-1.6.3
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。