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;
        }
      }
    }

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

  • 相关阅读:
    JS基本语法---while循环---练习
    JS基本语法---while循环
    JS基础语法---分支语句总结
    Python开发坦克大战
    基于Python的face_recognition库实现人脸识别
    10个Python 初学者必知编码小技巧
    论如何用python发qq消息轰炸虐狗好友
    Python + Selenium +Chrome 批量下载网页代码修改【新手必学】
    Python爬取mc皮肤【爬虫项目】
    Python 分发包中添加额外文件【新手必学】
  • 原文地址:https://www.cnblogs.com/xuniannian/p/7449335.html
Copyright © 2011-2022 走看看