addEventListener()与removeEventListener(),追加事件和删除追加事件

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)

```

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

时间: 2024-10-10 21:06:28

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

ie7、ie8兼容addEventListener和removeEventListener,解决this指向和detachEvent解除绑定事件问题

现代浏览器监听事件使用addEventListener函数,解除绑定监听使用removeEventListener函数.但是ie7.ie8监听事件使用attachEvent函数,解除监听事件使用detachEvent函数. 简单的兼容函数: 1 if(document.addEventListener){ 2 element.addEventListener(type, fun, useCapture); 3 }else{ 4 element.addEventListener("on"

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

一直想写一个原生事件监听的记录,方便以后看,不愿意写主要是事件监听的单词太长,记起来好难记每次都要查,这次把知道的写完了,来这里查好了,以后要是理解的更透彻了,就再补全好了 首先,DOM0级事件和DOM2级事件 给一个元素添加事件有三种方法 HTML <input type="button" value='button1' id='btn1' /><input type="button" value='button2' id='btn2' />

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

js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件处理程序的函数和一个布尔值.最有这个布尔值参数是true,表示在捕获阶段调用事件处理程序:如果是false,表示在冒泡阶段调用事件处理程序. 要在按钮上为click事件添加事件处

addEventListener()和removeEventListener()

作用: addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 它们都接受3个参数:事件名.事件处理的函数和布尔值. 布尔值参数是true,表示在捕获阶段调用事件处理程序:如果是false,表示在冒泡阶段调用事件处理程序. 示例: 环境:移动端,界面禁止触摸事件 要在body上添加事件处理程序,可以使用下列代码: document.body.addEventListener('touchmove', function (event)

一、addeventlistener 与 removeeventlistener

事件流:事件捕获,事件处理,事件冒泡 addEventListener()与removeEventListener()用于处理指定事件和删除事件处理程序.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件处理程序的函数和一个布尔值.这个布尔值参数是true,表示在捕获阶段调用事件处理程序:如果是false,表示在冒泡阶段调用事件处理程序.// 添加事件 addHanlder: function (element, type, hanlder) { if (ele

addEventListener()与removeEventListener()

addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件处理程序的函数和一个布尔值.最有这个布尔值参数是true,表示在捕获阶段调用事件处理程序:如果是false,表示在冒泡阶段调用事件处理程序. 要在按钮上为click事件添加事件处理程序,可以使用下列代码: var btn = document.getElementById("myBtn")

javascript -- addEventListener()和removeEventListener

addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件处理程序的函数和一个布尔值.最有这个布尔值参数是true,表示在捕获阶段调用事件处理程序:如果是false,表示在冒泡阶段调用事件处理程序. 要在按钮上为click事件添加事件处理程序,可以使用下列代码: var btn = document.getElementById("myBtn")

100 事件 [~ie8] 删除事件 以及同一个注册函数进行屏蔽

//base.js var $=function(_this)//调用,把this传递过来 { return new Base(_this); }; //对象式 function Base(_this) { //创建一个数组来获取节点和节点的数组 this.elements=[];//私有化,不共用 if(_this!=undefined)//这里的_this是一个对象,undefined也是个对象,却别typeof放回的带单引号的 "undefined" { this.element

写一个addEventListener以及removeEventListener

第一步:对象属性赋值为函数,对象内部函数控制年龄这一参数变化,同时成长事件也执行. class Person{ constructor(){ this.name = ''; this.age = 0; this.growup()//不断成长 this.growEvent = null//成长经历的事情 } setName(val){ this.name = val } growup(){ let _this = this; setInterval(()=>{ _this.age++; if(_t