本文总结了跨浏览器环境下添加事件监听器和获取事件对象的标准方法，并提供了一个封装好的EventUtil工具对象。内容涵盖IE9+、Firefox及旧版IE的兼容处理，包括事件绑定、移除、阻止冒泡和默认行为的实现，旨在帮助开发者简化多浏览器兼容开发。
跨浏览器事件处理工具封装
本文专门针对跨浏览器场景下添加事件监听器及使用事件对象的方法进行了梳理，并将相关功能封装为一个工具对象，供开发者参考学习。该工具主要解决不同浏览器在事件处理机制上的差异问题。
var EventUtil = {
// 添加侦听事件
addEventListener:function (element, type, handler) {
// IE9+、Firefox、Safari、chrome和Opera
if(element.addEventListener) {
element.addEventListener(type, handler, false);
}
// IE8-
else if(element.attachEvent) {
element.attachEvent("on" + type, handler);
}
},
// 移除侦听事件
removeEventListener:function (element, type, handler) {
// IE9+、Firefox、Safari、chrome和Opera
if(element.addEventListener) {
element.removeEventListener(type, handler, false);
}
// IE8-
else if(element.attachEvent) {
element.detachEvent("on" + type, handler);
}
},
// 获取事件对象
getEvent:function(event) {
if(typeof event == "undefined") {
event = window.event; // IE浏览器
}
return event;
},
// 获取触发事件的元素
getTarget:function(event){
if(typeof event.srcElement == "undefined") {
return event.target;
}else {
return event.srcElement; // IE浏览器
}
},
// 获取事件类型
getType:function(event) {
return event.type;
},
// 获取按键键码
getCharCode:function(event) {
if(typeof event.keyCode == "number") {
return event.keyCode; // IE8-、Firefox和opera
}else {
return event.charCode;
}
},
// 获取鼠标相对于文档的位置,即页面坐标位置
getPagePosition:function(event) {
var pageX = event.pageX,
pageY = event.pageY;
if(pageX == undefined) {
pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
}
if(pageY == undefined) {
pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
}
return {
pageX:pageX,
pageY:pageY
};
},
// 阻止事件的默认行为
preventDefault:function(event) {
if(event.preventDefault){
event.preventDefault();
}else {
event.returnValue = false; // IE浏览器
}
},
// 阻止事件冒泡
stopPropagation:function(event) {
if(typeof event.cancelBubble == "undefined") {
event.stopPropagation();
}else {
event.cancelBubble = true; // IE浏览器
}
}
};以下是具体的测试代码示例，用于验证上述工具函数的实际效果。
<div id="box" style="color:red;width: 100%;height:200px;" >
<input type="button" value="点击" id="btn" />
</div>
<a href="http://www.test.com" id="a">test</a>
var box = document.querySelector("#box");
box.onclick = function(event) {
event = EventUtil.getEvent(event);
alert(EventUtil.getType(event));
alert(EventUtil.getTarget(event));
};
var input = document.querySelector("input");
input.onclick = function(event) {
event = EventUtil.getEvent(event);
EventUtil.stopPropagation(event);
};
var a = document.getElementById("a");
a.onclick = function(event) {
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
};
以上即为跨浏览器实现添加事件监听器及处理事件对象的完整方法总结，希望能为读者的相关开发工作提供实用帮助。