• JavaScript高级程序设计40.pdf


    DOM0级事件处理程序

    就是将一个函数赋值给一个事件处理程序属性,具有简单、跨浏览器优势,首先必须取得一个操作对象的引用,每个元素(包括window和document)都有自己的事件处理程序属性,这些属性通常全部小写

    var btn=document.getElementById("myBtn");

    btn.onclick=function(){

        alert("Clicked");

        };

    使用DOM0级方法指定的事件处理程序被认为是元素的方法,这些事件处理程序在元素的作用域中运行,this引用当前元素

    btn.onclick=null;  //删除事件处理程序

    DOM2级事件处理程序

    “DOM2级事件”定义了2个方法,用于指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。所有的DOM节点中都包含这两个方法,接收3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值,布尔值true表示在捕获阶段调用事件处理程序;false表示在冒泡阶段调用事件处理程序

    btn.addEventListener("click",function(){

        alert(this.id);

        },false);

    如果为一个元素添加多个事件处理程序,则会按照它们的顺序依次触发

    通过addEventListener()添加的方法只能通过removeEventListener()移除,添加的匿名函数无法移除(上例就是个匿名函数)

    IE事件处理程序

    IE有两个类似的方法attachEvent()和detachEvent(),接收2个参数:事件处理程序名称和事件处理程序函数,IE8及之前值支持事件冒泡

    btn.attachEvent("onclick",function(){

        alert("Clicked");

        });

    注意,这里是“onclick”,而非之前的“click”

    attachEvent()方法与DOM0级主要区别在于:attachEvent()方法的事件处理程序在全局作用域中运行,this等于window;如果添加多个方法,IE会按照与addEventListener()相反的方向执行(从下往上)。

    detachEvent()和removeEventListener()移除的条件类似,必须提供相同的参数,并且匿名函数不能被移除

    跨浏览器的事件处理程序

    职责是视情况分别使用DOM0级方法、DOM2级方法或IE方法

    创建一个addHandler()方法,它属于EventUtil对象,接收3个参数:要操作的元素、事件名称和事件处理程序函数,还有一个与之对应的removeHandler()方法

    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;

          }

          }

      };

    可以这样使用

    var btn=document.getElementById("myBtn");

    var handler=function(){

      .....

      };

    EventUtil.addHandler(btn,"click",handler);

    EventUtil.removeHandler(btn,"click",handler);

  • 相关阅读:
    Redis指令(2) ------String
    Redis指令(1) ------常用指令
    Redis数据类型
    Python set集合
    Python random 模块
    Python random 模块
    Python time 模块
    Python sys模块
    Python 递归函数
    Python 局部变量和全局变量
  • 原文地址:https://www.cnblogs.com/sdgjytu/p/3777733.html
Copyright © 2020-2023  润新知