首页 > addEventListener()与removeEventListener()

addEventListener()与removeEventListener()

addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。所有的DOM节点中都包含这两种方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

要在按钮上为click事件添加事件处理程序，可以使用下列代码：

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

使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。来看下面的例子：

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

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除，如下面的例子所示：

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

在这个例子中，我使用addEventListener()添加一个事件处理程序。虽然调用removeEventListener(0是看似使用了相同的参数，但实际上，第二个参数与传入addEventListener()中的那一个完全不同的函数。而传入removeEventListener()中的事件处理程序函数必须与传入addEventListener()中的相同，如下面的例子所示：

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

重写后的这个例子没有问题，是因为在addEventListener()和removeEventListener()中用来相同的函数。

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

removeEventListener方法可以在网页中注销事件．也就是说删除网页中或某个元素的执行函数．比如body有一个onload事件．或者某个按扭的单击事件．等等所有的事件都可以被注销删除．让其无法发挥发用．

注意：只有被addEventListener方法添加的事件才可以使用removeEventListener来注销．如果你直接使用onclick或onkeyup直接写在元素内的事件．将无法使用removeEventListener来删除．

removeEventListener只支持基于Dom标准的浏览器，在IE中无法使用．不过IE有专用的删除事件方法detachEvent。

在 attachEvent 方法中，事件是以 “on” 开头的，而在 addEventListener 中，事件没有开头的 “on”，另外 addEventListener 还有第三个参数，一般这个参数指定为 false 就可以了。

更多相关：

  • Laravel框架中的event事件操作

    有时候当我们单纯的看 Laravel 手册的时候会有一些疑惑，比如说系统服务下的授权和事件，这些功能服务的应用场景是什么，其实如果没有经历过一定的开发经验有这些疑惑是很正常的事情，但是当我们在工作中多加思考会发现有时候这些服务其实我们一直都见过。下面就事件、事件监听举一个很简单的例子你就会发现。 ​ 这个例子是关于文章的浏览数的实现，...

  • react 开发过程中的总结/归纳

    1、点击元素，获取绑定该事件的父级元素，使用 e.currentTarget。e.target 获取的是，出发该事件的元素，该元素有可能是所绑定事件的元素的子元素。 　　 2、使用 react router4 　　history 只能传递给儿子组件，不能传递给孙子组件 　　如果孙子组件需要，可以通过 props 传递过去 　　 3、关...

  • js中的preventDefault与stopPropagation详解

    1. preventDefault:  　　比如百度,这是html中最基础的东西，起的作用就是点击百度链接到http://www.baidu.com,这是属于标签的默认行为;preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情;...

  • Vue组件绑定自定义事件

    Vue组件使用v-on绑定自定义事件： 　　可以分为3步理解： 　　　　1.在组件模板中按照正常事件机制绑定事件： 　　　　　　template: '', 　　　　　　如上，v-on:click就是用来给子组件绑定点击事件的，这就...

  • Java基础知识强化之IO流笔记03：throws的方式处理异常

    1. 什么时候使用throws ? （1）定义功能方法时候，需要把出现的问题暴露出来，让调用者去处理。那么就通过throws在方法上标识。 （2）有时候，我们是可以对异常进行处理的，但是又有些时候，我们根本就没有权限去处理某个异常。或者说我们处理不了，我就不处理了。为了解决这个出错问题，java针对这种问题，就提供了另一种处理方案：t...

  • access突然需要登录_早知道早好，微信小程序登录开发需要注意的事项

    最近公司要做一个企业微信的小程序，方便企业内的成员来登录，以便一些公司内的业务，只限于公司内的成员来操作，因为有微信小程序的开发经验，所以先当作微信小程序来开发了！首先来讲一下这个企业微信小程序与微信小程序登录的不同，下面是微信小程序登录的流程：小程序内需要调用wx.login()，获取临时登录凭证code，并回传到开发者服务器，然后...

  • python argv 详解_Python3 sys.argv[ ]用法详解

    sys.argv[]说白了就是一个从程序外部获取参数的桥梁，这个“外部”很关键，因为我们从外部取得的参数可以是多个，所以获得的是一个列表(list)，也就是说sys.argv其实可以看作是一个列表，所以才能用[]提取其中的元素。其第一个元素是程序本身，随后才依次是外部给予的参数。下面我们通过一个极简单的test.py程序的运行结果来说...

  • Blender程序性纹理学习教程大师班 Creative Shrimp – Procedural Texturing Blender Master Class

      标题:创意虾-程序纹理Blender大师班 信息: 什么是程序纹理？ 程序纹理将简单的数学转换为无限的真实感着色器，具有无限的多样性和分辨率。 超越看起来像一团像素特写的图像纹理，运用程序纹理的力量，清晰的细节和没有重复的模式。 你是不是在玩节点滑块，得到了一些有趣的结果，但不确定引擎盖下到底发生了什么？掌握了节...

  • gprof 性能优化工具

    gprof用于分析函数调用耗时，可用gprof分析最耗时的函数，以便优化程序。 gcc链接时也一定要加-pg参数，以使程序运行结束后生成gmon.out文件，供gprof分析。 gprof默认不支持多线程程序，默认不支持共享库程序。 gcc 编译程序时添加编译选项-pg 运行程序，程序退出时生成 gmon.outgprof ./...

  • 程序的编译和链接过程

    一.虚拟机、linux简介 简单介绍一下虚拟机还有就是各种操作系统，比如centos，Ubuntu 操作系统：linux（centos、Ubuntu、redhat），Android，Windows（xp、win8、win10） 进程，多个程序，分时技术，并行技术 一次打开多个程序，我们在只有一个cpu，如何让这些程序进...

©2024 11GX.COM