JavaScript 事件处理兼容方案：监听、移除与默认行为

添加事件监听器：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事件机制兼容性的整理内容，旨在提供实用的参考方案，帮助开发者解决不同浏览器间的事件处理差异问题。