js高级程序设计之跨浏览器事件处理

//事件

var EventUtil = {
//添加事件
addHandler:function (element, type, handler) { //element:DOM对象,type:事件类型,handler:事件函数
if (element.addEventListener) {
//是否存在DOM2级方法
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
//IE方法,不过IE中的作用域是全局性的
element.attachEvent("on" + type, handler);
} else {
//DOM0级方法
element["on" + type] = handler;
}
},
//获取DOM event对象或者IE event对象
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;
}
},
//移除事件
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;
}
},
//阻止事件冒泡
stopPropagation:function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
//mouseout,mouseover相关元素
getRelatedTarget:function (event) {
if (event.relatedTarget) {
//DOM的event对象的relatedTarget
return event.relatedTarget;
} else if (event.toElement) {
//IE mouseout事件触发时，toElement代表相关元素
return event.toElement;
} else if (event.fromElement) {
//IE mouseover事件触发时,fromElement代表相关元素
return event.fromElement;
} else {
return null;
}
},
//鼠标按钮
getButton:function (event) {
//因为DOM版与iE版同名，需通过hasFeature()方法检测
if (document.implementation.hasFeature("MouseEvents", "2.0")) {
return event.button;
} else {
//IE event.button
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") {
//非IE在keypress事件时charCode代表那个键的ASCII值
//在不支持此属性的浏览器中，值为undefined
return event.charCode;
} else {
// for IE
return event.keyCode;
}
},
//获取鼠标滚轮数值判断方向
//向上滚动数值为正，是120的倍数
//向下滚动数值为负
getWheelDelta:function (event) {
if (event.wheelDelta) {
//IE,opera 9.5以后,chrome,safari支持事件类型mousewheel
return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
} else {
//Firefox支持事件类型DOMMouseScroll
return -event.detail * 40;
}
},
//获取剪贴板数据
/** etc:
* EventUtil.addHandler(textbox,"paste",function(event){
* event.EventUtil.getEvent(event);
* var text=EventUtil.getClipboardText(event);
* if(!/^\d*$/.test(text)){
* EventUtil.preventDefault(event);
* });
* 只有数值才会被粘贴到文本框
*/
getClipboardText:function (event) {
var clipboardData = (event.clipboardData || window.clipboardData); //for Safari,Chrome or IE
return clipboardData.getData("text");
},

//设置剪贴板数据
/**
* etc:
* EventUtil.addHandler(textbox,"copy",function(event){
* event.EventUtil.getEvent(event);
* EventUtil.preventDefault(event);
* EventUtil.setClipboardText(event,"Hello world");
* });
* @param event
* @param value
* @return {*}
* 不会将文本框中的文本复制到剪贴板
*/
setClipboardText:function (event, value) {
if (event.clipboardData) {
//for Chrome.Safari
return event.clipboardData.setData("text/plain", value);
} else {
//for IE
return window.clipboardData.setData("text", value);
}
}
};