ie firefox chrome opera Safari浏览器中对 event的处理并不一致,在此我将各个浏览器中event的兼容处理做了一个汇总,此处引用的是javascript中的event兼容处理代码。
var EventUtil = {//在这里我们用一个对象来将对event的各种兼容处理封装起来
//首先是对绑定事件的兼容
addHandler: function(element, type, handler){
if (element.addEventListener){
//DOM2级处理绑定事件方法
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
//IE绑定方法
element.attachEvent("on" + type, handler);
} else {
//DOM0级处理方法(可选,仅支持DOM0级的浏览器似乎已经不存在了)
element["on" + type] = handler;
}
},
//鼠标按钮的兼容处理
getButton: function(event){
if (document.implementation.hasFeature("MouseEvents", "2.0")){//首先检查是否是DOM标准
return event.button;
} else {
//对IE向DOM兼容
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;
}
}
},
//获取字符编码
getCharCode: function(event){
if (typeof event.charCode == "number"){
return event.charCode;
} else {//IE8之前和opera 需要使用keyCode获取字符编码
return event.keyCode;
}
},
//剪切板的访问
getClipboardText: function(event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
},
//得到事件对象
getEvent: function(event){
return event ? event : window.event;
},
//得到相关元素
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;
} },
//得到事件目标
getTarget: function(event){
return event.target || event.srcElement;
},
//对滑轮事件进行兼容
getWheelDelta: function(event){
if (event.wheelDelta){
return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
} else {
return -event.detail * 40;
}
},
//阻止默认事件
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
//移除事件
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;
}
},
//设置剪切板内容
setClipboardText: function(event, value){
if (event.clipboardData){
event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData){
window.clipboardData.setData("text", value);
}
},
//阻止事件冒泡
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
} };
此处添加的事件尚不完全,有待扩充。这里引用的是《javascript高级程序设计》中的实例。