虽然DOM和IE中的event对象不同,但基于他们的相似性依旧可以拿出跨浏览器的方案来。IE中event对象全部信息和方法DOM方法中都有,只不过实现的方法不一样,这种对应关系让实现两种事件模型之间的映射非常容易。创建EventUtil对象,如下:
var EventUtil = {
addHandler: function(element, type, handler){ // 添加事件处理程序
if(element.addEventListener){ // 存在DOM2级方法
element.addEventListener(type, handler, false); // false表示在冒泡阶段触发
} else if(element.attachEvent) { // IE, 加 "on"是为了兼容IE8及以前的浏览器
element.attachEvent("on" + type, handler);
} else { // DOM0级方法,一般不会执行
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler){ // 添加事件处理程序
if(element.removeEventListener){ // 存在DOM2级方法
element.removeEventListener(type, handler, false); // false表示在冒泡阶段触发
} else if(element.detachEvent) { // IE, 加 "on"是为了兼容IE8及以前的浏览器
element.detachEvent("on" + type, handler);
} else { // DOM0级方法,一般不会执行
element["on" + type] = null;
}
},
getEvent: function(event) { // 获取事件对象
return event ? event : window.event; // IE中的event是undefined,需要通过window.event获取
},
getTarget: function(event) { // 获取事件的目标
return event.target || event.srcElement; // IE中srcElement才是事件的真是目标
},
preventDefault: function(event) { // 阻止默认行为,例如a标签自动跳转
if(event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 由于IE9以前不支持事件捕获,所以在跨浏览器情况下,这里只能阻止事件冒泡
stopPropagation: function(event) {
if(event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}