JavaScript:兼容不同浏览器的事件对象
对于DOM和IE中的event对象来说,功能相似但获取的方式不同,因此我们可以通过EventUtil对象加以增添,使两者获取各自兼容的方法。
var EventUtil = {
//增加监听事件
addHandler: function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on" + type,handler)
}else{
element["on" + type] = handler;
}
},
//删除监听事件
removeHandler: function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on" + type,handler)
}else{
element["on" + type] = null;
}
},
//获取事件对象
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;
}
},
//获取相关元素
getRelatedTarget:function(event){
if(event.relatedTarget){
return event.relatedTarget
}else if(event.toElement){
return event.toElement;
}else if(event.fromELement){
return event.fromElement;
}else{
return null;
}
},
// 获取鼠标按钮
getButton:function(){
if(document.implementation.hasFeature("MouseEvents","2.0")){
return event.button;
}else{
switch(event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
},
// 获取鼠标滚轮增值
getWheelDalta: function(event){
if(event.wheelDalta){
return (client.engine.opera && client.engine.opera < 9.5 ?
-event.wheelDelta : event.wheelDelta)
}else{
return -event.detail*40;
}
},
// 获取charcode
getCharCode:function(event){
if(typeof event.charCode == "number"){
return event.charCode;
}else{
return event.keyCode;
},
//获取剪切板数据
getClipboardText:function(event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData;
},
//修改剪切板数据
setClipboardText:function(event){
if(event.clipboardData){
return event.clipboardData.setData("text/plain",value);
}else if(window.clipboardData){
return window.clipboardData.setData("text",value);
}
},
}