通常情况下,在IE下通过attachEvent给对象绑定事件后,this指向的并不是当前触发事件的DOM对象,我们必须使用
?
event.srcElement手动获取。现在主流浏览器(非IE)都支持addEventListener方法。为了兼容,一般都这么写:
?
function addEvent(o,evt,fn,bubble){
bubble = bubble || false;
evt = evt.toLowerCase();
if(o.addEventListener){
o.addEventListener(evt,fn,bubble);
}else{
o.attachEvent("on"+evt,fn);
}
}
?
?这样写在一定程度上兼容了浏览器。比如:
?
? ?function test(e){alert(this.nodeName)}
?
? ?addEvent(o,"click",test);
?
? 这样每个浏览器都可以绑定了。但是你会说IE不支持e,对,这正是这个函数的局限之一。IE不支持e,和e对应的是
?
event,我不想改动绑定的函数,我希望IE也支持e,下面的函数可以做到:
?
? ??function fixEvent(e){
e = e || window.event;
return {
type:e.type,
target: e.target || e.srcElement,
relatedTarget: e.relatedTarget || (e.type=="mouseout" ? e.toElement : e.fromElement),
keyCode: e.charCode || e.keyCode,
layerX: e.layerX || e.offsetX,
layerY: e.layerY || e.offsetY,
clientX: e.clientX,
clientY: e.clientY,
altKey: e.altKey,
ctrlKey: e.ctrlKey,
shiftKey: e.shiftKey,
currentTarget: e.currentTarget,
preventDefault:function(){
if (e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
return false;
}
},
stopPropagation:function(){
if (e && e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
}
};
}
?
?
? ? 该函数需要一个事件对象作为参数,然后返回一个修正后的对象。现在修改一下addEvent方法:
?
? ??function addEvent(o,evt,fn,bubble){
bubble = bubble || false;
evt = evt.toLowerCase();
if(o.addEventListener){
o.addEventListener(evt,function(e){
e = fixEvent(e);
fn.call(e.target,e);
},bubble);
}else{
o.attachEvent("on"+evt,function(e){
e = fixEvent(e);
//ie不支持currentTarget,手动设置为o
if(!e.currentTarget){
e.currentTarget = o;
};
fn.call(e.target,e);
});
}
}
?
?
? ?这样我们绑定的test函数就可以在不同浏览器里执行了。