本文详细整理了JavaScript中事件处理的跨浏览器兼容方案，涵盖addEventListener与attachEvent的添加与移除机制，以及preventDefault与returnValue对默认行为的阻止方法。通过封装函数实现IE8及以下版本与现代浏览器的统一处理，确保事件目标获取的准确性。
添加事件监听器：W3C与IE标准对比
在Web开发中，为元素添加事件监听器是常见需求。主要涉及两种标准：W3C规范的addEventListener和IE特有的attachEvent。
W3C标准
使用addEventListener('click', function(){alert('Hello World')}, false)可添加事件。其中第一个参数指定事件类型，第二个参数为处理函数，第三个参数布尔值控制事件阶段：false表示冒泡阶段，true表示捕获阶段。需注意，IE8及以下版本不支持此方法。
IE标准
使用attachEvent('onclick', function(){alert('Hello World')})添加事件。第一个参数需包含'on'前缀，第二个参数为处理函数。由于IE仅支持冒泡，因此无需第三个参数。
跨浏览器兼容方案
function insertEvent(obj,Event,fun){
if(obj.addEvenListener){
addEventLitener(Event,fun,false)
}else if(obj.attach){
attachEvent('on'+Event,fun)
}
}移除事件监听器的正确方式
移除事件监听器时，需对应使用removeEventListener和detachEvent。
W3C标准下的移除
通过addEventListener添加的事件，必须使用removeEventListener进行移除。
注意：以下写法是错误的，因为处理函数不能是匿名函数。
addEventListener('click', function(){alert('Hello World')}, false)
removeEventListener('click', function(){alert('Hello World')}, false)
解决方案
addEventListener('click' , box ,false );
removeEventListener('click',box，false) ;
function box(){
alert('Hello World');
}
跨浏览器兼容实现
function deleteEvent(obj,Event,fun){
if(obj.removeEventListener){
removeEventListener(Event,fun,false);
}else if(obj.detachEvent){
detachEvent('on'+Event,fun)
}
}
阻止事件默认行为的兼容处理
阻止特定事件的默认行为
涉及preventDefault和returnValue两个属性。
W3C标准使用preventDefault
IE标准使用returnValue
跨浏览器兼容实现
function(event){
event=event || window.event;
if(event.preventDefault){
event.preventDefault()
}else{
event.returnValue=false;
}
}
获取事件目标对象的兼容方案
获取事件目标对象
涉及target和srcElement两个属性。
function(event){
event=event || window.event;
if(event.target){
return event.target;
}else if(event.srcElement){
return event.srcElement;
}
}
以上关于JavaScript事件机制兼容性的整理内容，旨在提供实用的参考方案，帮助开发者解决不同浏览器间的事件处理差异问题。