zoukankan      html  css  js  c++  java
  • 跨浏览器的事件处理程序

    "DOM2"级事件定义了两个方法用于处理指定和删除程序的操作:addEventListener()和removeEventListener().所有的DOM节点都包含这两个方法,并且他们都接受三个参数:要处理的事件名、作为时间处理程序的函数和一个布尔值,最后这个布尔值参数如果是true,则表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。IE实现了与DOM类似的两个方法:attachEvent()和detachEvent(),他们接受相同的两个参数:时间处理程序名称和事件处理程序函数,由于Ie8及更早版本只支持事件冒泡,所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。

    事件对象:DOM中的事件对象event,IE中的事件对象window.event

    事件目标:DOM中的事件对象event.target,IE中的事件对象event.srcElement

    returnValue相当于DOM中的preventDefault()方法,他们的作用就是取消事件给定的默认行为

    cancelBuble相当于DOM中的stopPropagation()方法,都是用来阻止事件冒泡的

    这里的代码是兼容不同浏览器的写法

    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;
        }
      },
      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;
        }
      },
      removeHandler:function(element,type,handler){
        if(element.removeEventListener){
          element.removeEventListener(type,element,false);
        }else if(element.detachEvent){
          element.detachEvent("on"+type,handler);
        }else{
          element["on"+type]=null;
        }
      },
      stopPropagation:function(event){
        if(event.stopPropagation){
          event.stopPropagation();
        }else{
          event.cancelBubble=true;
        }
      }
    }

    本人正在学习和摸索中,如有错误,欢迎指正!

  • 相关阅读:
    Hiho----无间道之并查集
    Linux之压缩与解压
    Linux之用户和用户组
    Linux之关机/重启命令及一些符号
    Linux之基本操作命令
    Linux之vi/vim
    解决eclipse中maven报错Failed to read artifact descriptor for xxxx:jar
    CentOS 7下 solr 单机版安装与配置
    CentOS 7下 Tomcat7 安装与配置
    CentOS 7下 JDK 1.7 安装与配置
  • 原文地址:https://www.cnblogs.com/xuniannian/p/7449335.html
Copyright © 2011-2022 走看看