封装 DOM事件 EventUtil对象跨浏览器兼容

最新推荐文章于 2019-08-16 02:24:43 发布

Clannad_汐

最新推荐文章于 2019-08-16 02:24:43 发布

阅读量492

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： dom 对象函数浏览器

本文链接：https://blog.csdn.net/c1481118216/article/details/65441244

web 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个兼容多种浏览器的DOM事件工具封装，包括添加和移除事件监听器、获取事件对象及类型、阻止默认行为和事件冒泡等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*
* eventUtil对象  封装了对DOM事件的 一些工具 
    完全兼容各种浏览器
*/
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;
          },
          //获取事件类型
          getType:function(event){
            return event.type;
          },
         //获取事件触发的DOM元素
          getElement:function(event){
            return event.target || event.srcElement;
          },
          //阻止默认行为  例如a标签的href自动跳转功能
          preventDefault:function(event){
            if(event.preventDefault){
              event.preventDefault();
            }else{
              event.returnValue=false;
            }
          },
          //阻止事件冒泡
         stopPropagation:function(event){
           if(event.stopPropagation){
             event.stopPropagation();
           }else{
             event.cancelBubble=true;
           }
         }
  }