在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;
}
}