<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Event对象跨浏览器兼容性写法</title>
</head>
<body>
<script>
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]=handler;
}
},
//获取事件本身
getTarget:function (){
return event.target || event.srcElement;
},
//阻止默认行为
preventDefault:function (){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
//取消冒泡和捕获
stopPropagation:function (){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
</script>
<!-- 测试 -->
<div id="div">
爸爸
<button id="btn">儿子</button>
</div>
<a id="a" href="https://www.baidu.com/">百度</a>
<script>
var div=document.getElementById("div");
var btn=document.getElementById("btn");
EventUtil.addHandler(div,"click",function(){
console.log("我是老子");
console.log(EventUtil.getTarget(event));//获取target
})
EventUtil.addHandler(btn,"click",function(){
console.log("我是儿子");
EventUtil.stopPropagation();//阻止了冒泡
})
var a=document.getElementById("a");
EventUtil.addHandler(a,"click",function(){
console.log("我是链接");
EventUtil.preventDefault();//阻止默认行为
})
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/vinson-blog/p/12114809.html
时间： 2024-08-24 04:41:33