addEventListener()与removeEventListener()用于追加事件和删除追加。所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。 
最后这个布尔值参数是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。默认为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);

在这个例子中,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()中用来相同的函数。

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

亲测: 
方法的内存地址十分的重要,一定要相同才可以删除;试过遇到的坑:

 var clickFun = null;
aa = function(){
clickFun = function(){
alert("1")
}
window.removeEventListener("click",clickFun,false)
window.addEventListener("click",clickFun,false)
}
setInterval(function(){
aa()
},2000)

需求,需要不断地往一个function里面塞数据,里面会有追加,如果不删除了话,会一直追加上去,不环保并且耗内存,必须要删掉追加;然而像上面这样写的话,由于removeEventListener和addEventListener里面的clickFun内存不相等,导致删除不成功;调整如下:

 var clickFun = null;
aa = function(){
!clickFun && (window.removeEventListener("click",clickFun,false));
clickFun = function(){
alert("1")
}
window.addEventListener("click",clickFun,false)
}
setInterval(function(){
aa()
},2000)
 

确保删除的是同一个内存的方法

addEventListener()与removeEventListener(),追加事件和删除追加事件的更多相关文章

  1. 事件监听addEventListener()和removeEventListener() ---------1

    一直想写一个原生事件监听的记录,方便以后看,不愿意写主要是事件监听的单词太长,记起来好难记每次都要查,这次把知道的写完了,来这里查好了,以后要是理解的更透彻了,就再补全好了 首先,DOM0级事件和DO ...

  2. js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定

    js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener( ...

  3. JS添加事件和解绑事件:addEventListener()与removeEventListener()

    作用: addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 它们都接受3个参数:事件名.事件处理的函数和布尔值. 布尔值参数是true ...

  4. 兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent

    兼容8事件绑定与解绑addEventListener.removeEventListener和ie的attachEvent.detachEvent   ;(function(){ // 事件绑定 bi ...

  5. (转)addEventListener()与removeEventListener()详解

    转自:http://www.111cn.net/wy/js-ajax/48004.htm addEventListener()与removeEventListener()用于处理指定和删除事件处理程序 ...

  6. javascript -- addEventListener()和removeEventListener

    addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件 ...

  7. addEventListener()和removeEventListener()

    作用: addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 它们都接受3个参数:事件名.事件处理的函数和布尔值. 布尔值参数是true ...

  8. addEventListener() 和 removeEventListener() 简介

    DOM方法  addEventListener()  和  removeEventListener()  是用来分配和删除事件的函数   这两个方法都需要三个参数  分别为: 事件名称(String) ...

  9. 写一个addEventListener以及removeEventListener

    第一步:对象属性赋值为函数,对象内部函数控制年龄这一参数变化,同时成长事件也执行. class Person{ constructor(){ this.name = ''; this.age = 0; ...

随机推荐

  1. 百面机器学习--跟课Task整理

    涉及书中内容:特征工程&&模型评估 不同的特征如何进行特征工程? 特征是原始数据作为输入,特征工程的结果,作为输入供算法和模型使用. 对于数值型特征,为消除特征间的量纲影响,应对特征进 ...

  2. NOIP 膜你题 DAY2

    NOIp膜你题   Day2 duliu 出题人:ZAY     题解 这就是一道组合数问题鸭!!!  可是泥为什么没有推出式子!! 首先我们知道的是 m 盆花都要摆上,然后他们的顺序不定(主人公忘记 ...

  3. 【前端】CSS隐藏元素的方法和区别

    CSS隐藏元素的方法和区别 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  4. python3发送邮件

    import smtplib from email.mime.text import MIMEText from email.utils import formataddr import psutil ...

  5. nginx (待更新)

    install apt install nginx 默认在 /etc/nginx 目录下 一个 master 以及多个 worker 3504 root 20 0 141M 7196 5552 S 0 ...

  6. MySQL导入到SQLServer

    Mysql是在Linux环境服务器,MSSQL在windows服务器上 1.在MSServer中安装VPN 2.为VPN配置Mysql服务器账号 3.账号中的文件 4.在MSSQL服务器上安装mysq ...

  7. 【ACM-ICPC 2018 南京赛区网络预赛 L】Magical Girl Haze

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 定义dis[i][j]表示到达i这个点. 用掉了j次去除边的机会的最短路. dis[1][0]= 0; 在写松弛条件的时候. 如果用 ...

  8. 【Codeforces Round #505 (rated, Div. 1 + Div. 2, based on VK Cup 2018 Final) A】 Doggo Recoloring

    [链接] 我是链接,点我呀:) [题意] 你可以把出现次数大于1的颜色换成其他颜色. 问你最后能不能全都变成同一种颜色 [题解] 判断一下有没有出现次数大于1的就好. 有的话.显然可以一直用它变颜色. ...

  9. MySQL 利用binlog增量备份+还原实例

    一,什么是增量备份 增量备份,就是将新增加的数据进行备份.假如你一个数据库,有10G的数据,每天会增加10M的数据,数据库每天都要备份一次,这么多数据是不是都要备份呢?还是只要备份增加的数据呢,很显然 ...

  10. java 线程安全和不安全

    线程安全就是多线程访问时,采用了加锁机制,当一个线程访问该类的某个数据时,进行保护,其他线程不能进行访问直到该线程读取完,其他线程才可使用.不会出现数据不一致或者数据污染.(Vector,HashTa ...