Javascript之浏览器兼容EventUtil

时间:2022-01-07 19:20:17
var EventUtil = {
//添加事件处理程序
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
//DOM2中定义的事件处理程序,IE9,Firefox,Safari,Chrome和Opera支持此方法。
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
//在IE中attachEvent()方法是在全局作用域中运行的,也就是this等于window。而且如果给一个事件添加了多个处理程序,其执行顺序是逆序的。
} else {
element["on" + type] = handler;
//DOM0级方法,其只对每个事件只支持一个事件处理程序。
}
},
//移除事件处理程序
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;
//DOM0级方法
}
},
//获取事件对象
getEvent: function (event) {
return event ? event : window.event;
//在兼容DOM的浏览器中,event是简单的传入和返回;在IE中,event是未定义的(undefined),而是一个window对象属性。
},
//获取事件目标
getTarget: function (event) {
return event.target || event.srcElement;
//IE中的事件目标属性是srcElement。
},
//取消事件的默认行为
//只有在cancelable属性为true时,才可以取消事件的默认行为。
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
//IE中的事件对象有returnValue属性,默认为true,设置为false可以取消默认行为。
}
},
//取消事件的捕获或者冒泡
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
//可以用来取消事件捕获和冒泡。
} else {
event.cancelBubbles = true;
//兼容IE,只可以取消事件冒泡。
}
},
//获取相关元素,只对于mouseover,mouseout才包含值,对于其他事件是null。
getRelatedTarget: function (event) {
if (event.relatedTarger) {
return event.relatedTarget;
//DOM通过relatedTarget属性保存相关元素。
} else if (event.toElement) { //兼容IE,mouseout触发。
return event.toElement;
} else if (event.fromElement) { //兼容IE,mouseover事件触发。
return event.fromElement;
} else { return null; } },
//获取鼠标点击按钮
getMouseButton:function(evsent){
if (document.implementation.hasFeature("MouseEvents","2.0")){
return event.button; //0-鼠标主按键/左键;1-鼠标中间按键/滚轮;2-鼠标次按键/右键。
} else{
switch(event.button){
case 0:
case 1:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
},
//鼠标滚轮事件,获取wheelData。
getWheelData:function(event){ //向前滚动是,wheelData是120的倍数,向后滚动是-120的倍数。
if(event.wheelData){
return (client.engine.opera && client.engine.opera<9.5 ? -event.wheelData : event.wheelData);
//在opera9.5前的版本中,wheelData的正负号是颠倒的。
}
else{ return -event.detail*40;} //兼容Firefox,其鼠标滚轮信息保存在detail中,而且是向前是-3的倍数,向后是3的倍数。
},
//取得按键的字符编码
getCharCode: function(event){
if (typeof event.charCode == "number"){
return event.charCode; //IE9,Firefox,Safari,Chrome的event对象有一个charCode属性,只有发生keypress事件时才包含值。
        } else {
return event.keyCode; //IE8及之前的版本和Opera在keyCode中保存字符编码。
}
}
//操作剪切板
//取得剪切板数据
getClipboardText: function(event){
var clipboardData = (event.clipboardData || window.cilpboardData);//在IE中是window对象的属性。
return clipboardData.getData("text"); //在IE中有两种数据格式text和url;其他浏览器是MIME类型,但可以用text代表text/plain。
}
//设置剪切板数据
setClipboardText: funtion(evnet,value){
if (event.clipboardData){
return event.clipboardData.setData("text/plain", value); //与以上不同的是setData方法不能识别text。
} else if (window.clipboardData){
return window.clipboardData.setData("text", value); //兼容IE
}
}

}

持续更新中……