六种兼容性处理事件

在JavaScript中事件处理有着HTML事件处理程序，DOM0级事件处理程序，DOM2级事件处理程序。其中DOM2级事件处理程序根据浏览器的不同处理的方式又有着不同。

而本篇文章主要讲的就是DOM2级事件处理程序中六种常见的处理形式。

1.事件绑定

IE8及以下的事件绑定是使用：

attachEvent() 事件绑定

参数：

事件处理程序名称

事件处理函数

非IE8及以下的事件绑定是使用：

addEventListener() 事件绑定

参数：

要绑定的事件名

作为事件处理的函数

布尔值：true在捕获阶段调用事件处理程序；false在冒泡阶段调用

兼容性代码为：

bind:function(el,type,handle){
              if(el.addEventListener){
              	el.addEventListener(type,handle);
              }else if(el.attachEvent){
                  el.attachEvent('on'+type,handle);
              }else{
              	el['on'+type] = handle;
              }
            }

2.事件解绑

IE8及以下的事件解绑是使用：

removeEventListener() 事件删除

参数：

要删除的事件名

作为事件处理的函数

布尔值：true在捕获阶段调用事件处理程序；false在冒泡阶段调用

非IE8及以下的事件解绑是使用：

detachEvent() 事件移除

参数：

事件处理程序名称

事件处理函数

兼容性代码为：

unbind:function(el,type,handle){
            	if(el.removeEventListener){
            		el.removeEventListener(type,handle);
            	}else if(el.detachEvent){
            		el.detachEvent('on'+type,handle);
            	}else{
            		el['on'+type] = null;
            	}
            }

在以上两种事件处理中，非IE8及以下的事件处理中可以添加多个事件处理程序，并且按照添加她们的顺序触发。移除事件传入的参数 与添加处理程序时使用的参数相同，添加事件时如果使用匿名函数将无法删除。

 

3.事件对象

IE8及以下和非IE8及以下是一样的：

getEvent:function(event){
            	return event?event:window.event;
            }

4.事件目标

IE8及以下和非IE8及以下是一样的：

getTarget:function(event){
                  return event.target?event.target:event.srcElement;
            }

5.阻止冒泡

IE8及以下的阻止冒泡是使用：

cancelBubble    Boolean    是否取消事件冒泡,值为true取消冒泡

非IE8及以下的阻止冒泡是使用：

stopPropagation() 

兼容性代码为：

stopProp:function(event){
               if(event.stopPropagation){
               	event.stopPropagation();
               }else{
               	event.cancelBubble = true;
               }
            }

6.阻止默认

IE8及以下的阻止默认是使用：

returnValue Boolean 取消时间默认行为,值为false阻止

非IE8及以下的阻止默认是使用：

preventDefault()

兼容性代码为：

 preventDef:function(event){
            	if(event.preventDefault){
            		event.preventDefault();
            	}else{
            		event.returnValue = false;
            	}
            }