浏览器兼容之js事件处理
2019-11-05 本文已影响0人
蒋蒋_dbfe
最近在看《JavaScript高级程序设计》这本书，刚开始看着密密麻麻的文字还是蛮头疼的，但是越看越有意思。这里我截取了其中的一段代码----跨浏览器的事件对象，这个在我们真实项目中针对跨浏览器和一些老的浏览器版本兼容还是有一点的参考价值，具体代码如下。
<!DOCTYPE html>
<html>
<head>
<title>跨浏览器事件对象</title>
</head>
<body>
<button id="mybtn">点击</button>
<script type="text/javascript">
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;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false)
}else if(element.detachEvent){
element.detachEvent('on'+type,handler)
}else{
element['on'+type] = null;
}
},
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;
}
},
stopePropagation: function(event){ //ie不支持事件捕获，所以该方法在跨浏览器的情况就只能够阻止事件冒泡
if(event.stopePropagation){
event.stopePropagation();
}else{
event.cancelBubble = true;
}
}
}
//具体使用
var btn = document.getElementById('mybtn');
var handler = function(){
alert('show the content')
}
EventUtil.addHandler(btn,"click",handler);
</script>
</body>
</html>
简单说明
1、普通浏览器添加事件： element.addEventListener(type,functionName,boolean) element.removeEventListener(type,functionName,boolean) ,boolean为true事件捕获，false事件冒泡
2、ie8以前添加事件: elemnt.attachEvent("on"+type,functionName) elemnt.detachEvent("on"+type,functionName) ，均为事件冒泡
3、其它老版本添加事件:element["on"+type]=function(){} element["on"+type]=null; 两种，事件捕获和事件冒泡
其它：ie和DOM的事件对象event不一致，所以在操做事件对象时会有不同的处理,所以新增加了四个方法getEvent、getTarget、preventDefault、stopePropagation
