问题描述
由于IE和DOM中的事件处理机制的差别,我们在编写JavaScript脚本中需要对事件处理进行浏览器兼容处理,本文为阅读了《JavaScript高级程序设计》后的笔记,方便今后查看。
对象编写
var EventUtil = {
/**
* 绑定事件
* @param element dom节点
* @param type 绑定的事件类型
* @param handler 事件的执行函数
*/
addHandler: function (element, type, handler) {
//能力检测
if(element.addEventListener){
//最后一个参数false表示事件在冒泡阶段触发
element.addEventListener(type, handler, false);
}else if(element.attachEvent){
element.attachEvent("on" + type, handler);
}else{
element["on" + type] = handler;
}
},
/**
* 解除事件绑定
* @param element dom节点
* @param type 绑定的事件类型
* @param handler 事件的执行函数
*/
removeHandler: function (element, type, handler) {
if(element.removeEventListener){
//最后一个参数false表示事件在冒泡阶段触发
element.removeEventListener(type, handler, false);
}else if(element.detachEvent){
element.detachEvent("on" + type, handler);
}else{
element["on" + type] = handler;
}
},
/**
* 获取事件对象event
* @param event
* @returns {Event}
*/
getEvent: function (event) {
return event ? event : window.event;
},
/**
* 获取事件对象target
* @param event
* @returns {any | Element}
*/
getTarget: function(event){
return event.target || event.srcElement;
},
/**
* 阻止默认事件
* @param event
*/
preventDefault: function (event) {
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
/**
* 阻止事件冒泡
* @param event
*/
stopPropagation: function (event) {
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
},
/**
* 获取鼠标按钮的值
* @param event
* @returns {*} 返回的值:0表示主鼠标按钮,1表示中间的鼠标按钮,2表示次鼠标按钮
*/
getButton: function (event) {
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;
}
}
},
/**
* 获取鼠标滚动的WheelDelta值
* @param event
* @returns {number} 返回值+的表示滚轮向上滚动,-的表示滚轮向下滚动
*/
getWheelDelta: function (event) {
if(event.wheelDelta){
//Opera 9.5之前的版本wheelDelta值的正负号颠倒
return (window.opera && window.opera.version<9.5 ? -event.wheelDelta : event.wheelDelta);
}else{
//Firefox 的滚动事件
return -event.detail * 40;
}
},
/**
* 获取
* @param event
* @returns {number | *}
*/
getCharCode: function (event) {
if(typeof event.charCode == "number"){
//IE9、Firefox、Chrome、Safari
return event.charCode;
}else{
//IE8之前的版本、Opera
return event.keyCode;
}
}
}