事件兼容简单比较和函数封装

老IE浏览器 新版本IE和非IE浏览器
事件绑定 node.attrachEvent('onclick',fn) node.addEventListener('click',fn,false)
解除事件绑定 node.detachEvent('onclick',fn) node.removeEventListener('click',fn,false)
阻止事件冒泡 e.cancelBubble=true e.stopPropagation()
阻止默认事件 e.returnValue=true e.preventDefault()
点击对象 e.srcElement.innerText e.target.innerText
this指的是什么? window node

node.addEventListener('click',fn,false) 里面的false表示监听只在冒泡阶段执行,默认为false,zz设置为true是捕获阶段执行

事件兼容这么麻烦~
怎么办呢? 使用原生js只有封装!!!

事件绑定(统一this指向node):

function  addEvent(node,type,handler){
     if(!node) return false;
     if(node.addEventListener){
            node.addEventListener(type,handler,false);
            return true;
     }
     if(node.attrachEvent){
            node['e'+type+handler]=handler;
            node[type+handler]=function(){
                node['e'+type+handler]=handler(window.event); 
            }
            node.attrachEvent("on"+type,node[type+handler]);
            return true;
     }
    return false;
}

解除事件绑定
在使用上一个事件绑定封装函数的基础上使用下面这个解除事件绑定封装函数

function  removeEvent(node,type,handler){
     if(!node) return false;
     if(node.removeEventListener){
            node.removeEventListener(type,handler,false);
            return true;
     }
     if(node.detachEvent){
            node.detachEvent("on"+type,node[type+handler]);
            node[type+handler]=null;
            return true;
     }
    return false;
}

function getEvent(e){
return e||window.event;
}

阻止事件冒泡

function stopPropagation(e){
   if(e.stopPropagation){
      e.stopPropagation();
 }else{
     e.cancelBubble=true;
 }
}

阻止默认事件

function preventDefault(){
    if(e.preventDefault){
         e.preventDefault();
  }else{
        e.returnValue=true;
 }
}

点击的目标对象:

function target(){
   return e.target||e.srcElement;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,778评论 18 399
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,991评论 19 139
  • 本文通过一个简短的实例&控制台调试,了解react事件处理的全过程。下面是测试用代码,使用控制台可以清晰看到函数执...
    溪离欣洛阅读 1,234评论 2 2
  • 作者:因爱而生 《原创》 这个礼拜为写美食菜谱,连续几天没来简书冒泡了,这不马上要回老家过暑假了,赶紧抽时间把...
    因爱而生阅读 768评论 9 11
  • 昨晚办公室加班,遇到陌生人敲门借钱,今天未如约收到还款,打昨天留的电话依然是关机,感觉自己好像被骗了。 将故事讲给...
    雨叮阅读 189评论 0 0