javascript 跨浏览器的事件系统3
这部分说一下最近非常流行的事件代理。事件代理的实现简单来说，是把事件绑定到目标元素的祖先元素上，然后通过冒泡或捕获得到事件源，然后再判定事件源是否等于目标元素再执行回调函数。由于对目标元素的判定有时非常模糊，因此通过判定即可调用回调函数，这样，我们就达到一个监听器为许多事件源服务的目的。对于性能一向非常不怎么样的IE6来说，实在帮了一个大忙。
假如，有一个无序列表，点击弹出它的innerHTML，如果按事件绑定的做法，代码大概是这样：
var addEvent = function(el,type,callback,data){
if ( el.addEventListener ) {//如自定义对象就绑定回调函数了
el.addEventListener( type, callback, !!data );
} else if ( el.attachEvent ) {
el.attachEvent( "on" + type, function(){
return callback.call(el,window.event)
} );
}
}
var els = document.getElementsByTagName("li")
for(var i=0,n=els.length;i<n;i++){
addEvent(els[i],"click",function(){
alert(this.innerHTML)
})
}
}
如果用事件代理的做法大概是这样：
var ul = document.getElementsByTagName("ul")[0]
addEvent(ul,"click",function(e){
var el = e.srcElement || e.target;
if(el.tagName === "LI")
alert(el.innerHTML)
})
但是这样复用性不好，我们需要一个真正的事件代理函数。如果用YUI与jQuery的人应该知道，这其中必然涉及到选择器，利用选择器进行匹配，实现上面的el.tagName === "LI"，只不过适用性更广罢了。但现在我们不可能搞鼓个选择器出来，那可不是一下子就能实现的东西，况且它与我们的主题，为简单起见，我们就使用原生的标签选择器。换言之，新函数的参数之一，就是目标元素的tagName。其次，我们需要一个或一些代理元素，就像上面例子那个ul元素。我在《事件冒泡》一文中也给出各元素冒泡的情况了，若无视不能冒泡的事件，那么元素大抵是分上浮到from元素与上浮到文档这两种情况，当然还有上浮到window的情况，但最高只能上浮document。现在我们无视这些情况，强制为document。
var delegate = function(a,type,callback){
var els = document.getElementsByTagName(a);
addEvent(document,type,function(e){
var el = e.srcElement || e.target;
for(var i=0,n=els.length;i<n;i++){
if(el === els[i]){
return callback.call(el,e)
}
}
},true);
}
delegate("li","click",function(e){
alert(this.innerHTML+e.type)
});
这里有个奇妙的现象，当我们执行delegate函数，LI元素的个数为4，每当我们动态添加一个时，它也会相应添加一个。轻松实现jQuery所谓的live函数。不过，当我们把els转换为纯数组时，它就失去这种动态性了。jQuery的选择器等价于getElementsByTagName吗？不等于！因此，我们要重新来过了！
var delegate = function(a,type,callback){
var els = document.getElementsByTagName(a),
tmp = [];
for(var j=0,jn=els.length;j<jn;j++){
tmp.push(els[j])
}
els = tmp;//强制转换为纯数组
addEvent(document,type,function(e){
var el = e.srcElement || e.target;
for(var i=0,n=els.length;i<n;i++){
if(el === els[i]){
return callback.call(el,e)
}
}
},true);
}
为了尽量接近现实中的复杂需求，我最后还是给出一个小型选择器吧，注意只能运行于IE8（要求是标准模式）与较新的标准浏览器下。为了实现jQuery.live的效果，我们对代码做了一些调整：
var $ = function(selector,context){
context = context || document
try{
var els = context.querySelectorAll(selector),
result = [],ri=0,i=0,n=els.length;
for(;i<n;i++){
result[ri++] = els[i]
}
return result;
}catch(e){
alert("你的浏览器不支持querySelectorAll")
}
}
var delegate = function(a,type,callback){
addEvent(document,type,function(e){
var els = $(a);
var node = e.srcElement || e.target;
for(var i=0,el;el = els[i++];){
if(node === el){
return callback.call(node,e)
}
}
},true);
}
delegate("#list li","click",function(e){
alert(this.innerHTML+e.type)
});
就这样，一个粗糙的事件代理系统完成了。但有个问题，我们每次进入这个函数，就调用选择器，是不是很耗性能呢？因为动态添加的情况并不是每次都发生，我们只要比较原来的节点集合就行了，当发现原来的找不到，再调用选择器也不晚。第四部分我们将解决这问题，see you!
