zoukankan      html  css  js  c++  java
  • JavaScirpt中的事件处理程序

    事件处理在JS中可谓是点睛一笔,JS的事件处理程序使得JS成为了网页交互层的第一把交椅。那么,JS中有几种事件处理程序呢?

    1.DOM0级事件处理程序

    通过JS指定事件处理程序的传统方式,就是将一个函数添加给一个对象的事件处理程序。这种方式为现代所有的浏览器所用。原因一是方便简单,原因二是可以实现跨浏览器。

    1     var oA = document.getElementsByTagName("a")[0];
    2         oA.onclick = function(){
    3             alert(this.id);
    4 
    5     }    

    我们通过一个doucment对象获取到一个A标签的引用,然后在这个引用上添加onclick事件,但是有一点需要注意,添加事件那一段代码如果没有执行,就不会指定事件处理程序,所以,代码要在页面中的a标签之后。

    删除事件处理程序可以通过一个空引用:

    1 oA.onclick = null;

    2.DOM2级事件处理程序

    在“DOM2级事件”中定义了二个方法用来添加或者移除事件处理程序:

    1.addEventListener();

    2.removeEventListener();

    这两个方法的参数是一样的,第一个是要添加的事件类型,第二个是事件处理程序的函数名(如果用的是匿名函数,则无法移除),第三个是一个布尔值,true代表在事件捕获时期就添加该事件处理程序,false代表在事件冒泡时期添加该事件处理程序,一般都用false。兼容性的话,IE9+,Firefox,Safari,Chrome,和Opera支持DOM2级事件处理程序。

    1     oA.addEventListener("click",handle,false);
    2     oB.addEventListener("click",handle,false);
    3 
    4     var handle = function(){
    5         alert(this.id);
    6     }
    7     
    8     oA.removeEventListener("click",handle,false);
    9     oB.removeEventListener("click",handle,false);

    在这段代码中,分别给oA和oB对象添加了click事件,在运行的时候,会先弹出oA的id,然后才是oB的id,这两个事件处理程序会按他们自己的顺序去执行。注意,这里是click事件,没有on

    3.IE事件处理程序

    在IE中实西现了和DOM中类似的两个方法:

    1.attachEvent();

    2.detachEvent();

    这两个方法接受一样的参数,第一个是事件名,第二个是事件处理程序函数,用这两个方法会默认在事件冒泡中添加事件处理程序。

    1     oA.attachEvent("onclick",handle);
    2     oB.attachEvent("onclick",handle);
    3 
    4     var handle = function(){
    5         alert(this.id);
    6     }
    7 
    8     oA.detachEvent("onclick",handle);
    9     oB.detachEvent("onclick",handle);

    使用这两个函数需要注意一下几点:

    1.第一个参数是带on的,即onclick,这点不同于DOM2级的两个方法。

    2.作用域是不同的,这里的this,不同于DOM0级的作用域。在IE中的事件处理程序,会在全局作用域下运行,也就是说这里的this不再代表事件添加的对象,而是一直代表着window对象。

    3.顺序也不同与DOM方法,这里是会先执行第二句,然后再执行第一句,和DOM2级中的顺序是相反的,是反过来执行的。

    4.同样的,匿名函数不能移除事件,最好用有名字的函数。

    目前支持IE事件处理程序的浏览器有IE和Opera。

    • DOM0级事件处理程序
    • DOM2级事件处理程序
    • IE事件处理程序
  • 相关阅读:
    Hexo yilia 主题启用及相关设置
    Hexo Next 主题启用及相关设置
    值得一用的 Windows 软件清单
    ES6新特性2
    ES6新特性1
    手写promise第三天
    手写promise第一天
    Generator异步函数
    函子Functor
    柯里化函数组合的学习
  • 原文地址:https://www.cnblogs.com/178-533/p/7532732.html
Copyright © 2011-2022 走看看