跨浏览器的事件处理程序
Posted 丹妮娃儿
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了跨浏览器的事件处理程序相关的知识，希望对你有一定的参考价值。
"DOM2"级事件定义了两个方法用于处理指定和删除程序的操作：addEventListener()和removeEventListener().所有的DOM节点都包含这两个方法，并且他们都接受三个参数：要处理的事件名、作为时间处理程序的函数和一个布尔值，最后这个布尔值参数如果是true,则表示在捕获阶段调用事件处理程序；如果是false,表示在冒泡阶段调用事件处理程序。IE实现了与DOM类似的两个方法：attachEvent()和detachEvent(),他们接受相同的两个参数：时间处理程序名称和事件处理程序函数，由于Ie8及更早版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。
事件对象：DOM中的事件对象event，IE中的事件对象window.event
事件目标：DOM中的事件对象event.target，IE中的事件对象event.srcElement
returnValue相当于DOM中的preventDefault()方法，他们的作用就是取消事件给定的默认行为
cancelBuble相当于DOM中的stopPropagation()方法，都是用来阻止事件冒泡的
这里的代码是兼容不同浏览器的写法
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=handler;
}
},
getEvent:function(event){
return event?event:window.event;
},
getTarget:function(event){
return event.target||event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,element,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
本人正在学习和摸索中，如有错误，欢迎指正！
以上是关于跨浏览器的事件处理程序的主要内容，如果未能解决你的问题，请参考以下文章