跨浏览器事件，event对象处理程序

最新推荐文章于 2020-12-10 17:21:43 发布

weixin_40533188

最新推荐文章于 2020-12-10 17:21:43 发布

阅读量84

点赞数 1

文章标签： js事件

本文链接：https://blog.csdn.net/weixin_40533188/article/details/98471693

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>   event对象浏览器兼容性写法</title>
</head>
<body>

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);
           }else if(element.detachEvent){
               element.detachEvent("on"+type,handler)
           }else{
                 element["on"+type] = handler ；
           }
       },
       //阻止浏览器执行默认事件的动作
       preventDefault:function(event){
           if(event.preventDefault){
               event.preventDefault()
           }else{

               event.returnValue=false;
           }
       },
       //事件源
       getTarget:function(event){
           return event.target||event.srcElement;
       },

//对于是事件keypress，也需要区分浏览器

getCharCode:function (event) {
   if(typeof event.charCode=="number"){
       return event.charCode;
   }else{
       return event.keyCode;
   }
},
       //停止事件进一步起泡到包含层次的元素
       stopPropagation:function(event){
           if(event.stopPropagation){
               event.stopPropagation();
           }else{
               event.cancelBubble=true;
           }
       }
   }

//获取元素
var a =document.getElementById("a")
//阻止浏览器执行默认事件
EventUtil.addHandler(a,"click",function(event){
EventUtil.preventDefault(event);
});

//测试阻止冒泡行为
var child=document.getElementById("child");
var parent=document.getElementById("parent");
EventUtil.addHandler(child,"click",function(event){
   //停止事件进一步起泡到包含层次的元素
   alert("我是孩子节点");
   EventUtil.stopPropagation(event);
});
EventUtil.addHandler(parent,"click",function(){
   alert("我是父亲元素");
});

//测试获取事件源
var ul=document.getElementById("ul");

EventUtil.addHandler(ul,"click",function(event){
console.log(EventUtil.getTarget(event));
});

</script>

</body>
</html>

weixin_40533188

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨浏览器事件，event对象处理程序

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title> event对象浏览器兼容性写法</title></head><body> <a href="http://www.ba...
复制链接

扫一扫