跨浏览器的事件对象
我们依旧可以通过往EventUtil对象中写一些函数来实现跨浏览器的事件处理。
var EventUtil = { ①getEvent:function (event){
return event ? event :window.event;
},
②getTarget:function(event){
return event.target || event.srcElement;
},
③preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
④stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
},
};
其中定义了4个函数。
第一个getEvent,它返回对event对象的引用。由于在IE中事件对象的位置不同,可以使用这个方法取得event对象,而不必担心指定事件处理程序的方式。它的使用方法是:
event = EventUtil.getEvent(event);
};
在兼容DOM的浏览器中,event变量只是简单地传入和返回。而在IE中,event参数是未定义的(undefined),因此就会返回window.event。将这一行代码添加到事件处理程序的开头,就可以确保随时都能使用event对象,而不必担心用户使用的是什么浏览器。
第二个getTarget,它返回事件的目标。
用法:
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
};
第三个preventDefault,用于取消事件的默认行为。
用法:
link.onclick = function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
};
第四个stopPropagation,只能用来阻止事件冒泡,因为在IE中不支持事件捕获。
用法:
btn.onclick =function(event){
alert("Clicked");
event = EventUtil.getEvent(event);
EventUtil.stopPropagation(event);
}
document.body.onclick = function(event){
alert("Body clicked");
};