美文网首页
DOM2级事件处理程序,事件监听

DOM2级事件处理程序,事件监听

作者: Miss_Fairy | 来源:发表于2017-07-31 11:57 被阅读0次

“DOM2级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作: addEventListener() 和 removeEventListener()。所有DOM节点中都包含这两种方法,并且他们都接受3个参数:要处理的事件名,作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。
要在按钮上为click时间添加事件处理程序,可以使用下列代码:

var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
      alert(this.id);
},false);

上面的代码为一个按钮添加onclick 时间长护理程序,而且该事件会在冒泡阶段被触发。(因为最后一个参数是false)。与DOM0级方法一样,这里添加的事件处理程序也是与其依附的元素的作用于中运行。使用DOM2级方法处理事件处理程序的主要好处是可以添加多个事件处理程序。

var btn = document.getElementById("myBtn");
btn.addEventListener("click".function(){
      alert(this.id);
},false);
btn.addEventListener("click",function(){
      alert("Hello World");
},false);

这里为按钮添加两个事件处理程序。这两个事件处理程序会按照添加他们的顺序出发,因此首先会显示元素的ID,其次会显示“Hello World!”消息。
通过addEventListener()添加的事件处理程序 只能使用removeEventListener()来移除;移除时传入的参数与处理程序时使用的参数想通。这也意味着通过addEventListener()添加的匿名函数将无法移除,如下面的例子所示。

var btn = document.getElementById("myBtn");
    var handler = function(){
        alert(this.id);
    };
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); 

大多数情况下,都是将事件处理程序添加到时间流的冒泡阶段,这样可以最大限度地兼容各种浏览器。最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要,不建议在事件捕获阶段注册时事件处理程序。

IE中,attachEvent(),detachEvent()。这两个方法接受相同的两个参数:事件处理程序名称与时间处理程序函数。由于IE8及更早版本只支持时间冒泡,所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。

相关文章

  • 事件监听

    DOM0 事件和DOM2级在事件监听使用方式上有什么区别? Dom0级事件处理程序:在DOM0级事件处理程序,事件...

  • 进阶9

    DOM0 事件和DOM2级在事件监听使用方式上有什么区别? Dom0级事件处理程序:在DOM0级事件处理程序,事件...

  • 事件处理程序

    HTML事件处理程序 HTML程序和JS无法分离 DOM0级事件处理程序 DOM2级事件处理程序 DOM2级事件定...

  • 事件

    DOM0级和DOM2级在事件监听使用方式上有什么区别? DOM0级事件监听:用JavaScript指定事件处理程序...

  • javascript事件

    1 DOM0 事件和DOM2级在事件监听使用方式上的区别 DOM0级事件处理程序被认为是元素的方法,事件处理程序在...

  • 跨浏览器的事件处理程序

    事件处理程序有DOM0级事件处理程序、DOM2级事件处理程序,IE事件处理程序,DOM0级事件处理程序具有简单,跨...

  • JS事件

    关键词:事件 1. DOM0事件和DOM2级在事件监听使用方式上有何区别? 事件处理程序(事件监听器)有以下几种:...

  • JS 事件

    目录 事件流 事件处理程序HTML事件处理程序DOM0级事件处理程序DOM2级事件处理程序IE事件处理程序跨浏览器...

  • 事件处理

    HTML事件处理程序 DOM0级事件处理程序 DOM2级事件处理程序 addEventListener()和rem...

  • 事件

    题目1: DOM0 事件和DOM2级在事件监听使用方式上有什么区别? 事件处理程序我们也称之为事件监听器, 事件就...

网友评论

      本文标题:DOM2级事件处理程序,事件监听

      本文链接:https://www.haomeiwen.com/subject/tlillxtx.html