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 就可以了。

addEventListener()与removeEventListener()相关推荐

addEventListener和removeEventListener
addEventListener和removeEventListener 前言: 在夜深人静的时候,想起这两个这两天搞得忘坑里反复跳跃的addEventListener和removeEventList ...
JS添加事件和解绑事件：addEventListener()与removeEventListener()
作用: addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 它们都接受3个参数:事件名.事件处理的函数和布尔值. 布尔值参数是true ...
JS DOM事件（常用消息、常用事件、addEventListener、removeEventListener）
HTML 事件的例子: 当用户点击鼠标时当网页已加载时当图像已加载时当鼠标移动到元素上时当输入字段被改变时当提交 HTML 表单时当用户触发按键时 addEventListener()方法 ...
javascript中addEventListener与removeEventListener
addEventListener() 方法用于向指定元素添加事件句柄,拿百度首页做个示例 document.getElementsByTagName('div')[4].addEventListene ...
兼容IE8 addEventListener、removeEventListener 函数
//兼容bind函数 if(!Function.prototype.bind){Function.prototype.bind = function(){if(typeof this !== 'fun ...
js滚动条事件监听addEventListener、removeEventListener不生效
//移除监听需要满足需要移除的事件类型必须是一样的, 比如: click 需要从目标事件移除的 EventListener 函数必须和 addEventListener 中注册的是同一个, 也就是说 ...
【解决】addEventListener监听滚动与removeEventListener移除监听阻止冒泡（e.preventDefault()）不生效
[问题] 使用addEventListener监听滚动来阻止冒泡(e.preventDefault()),removeEventListener移除监听阻止冒泡(e.preventDefault()) ...
addeventlistener事件第三个参数_简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序...
这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在htm ...
addeventlistener事件参数_Vue的钩子事件和程序化侦听
对于Vue的事件机制,其实有一些高级技巧,我们最好能够掌握. 一.组件的生命周期钩子事件 Vue的生命周期函数,其实就是Vue开发者设定的一些hook钩子,你只要往hook里面编写代码,它就可以执行. ...

addEventListener()与removeEventListener()

addEventListener()与removeEventListener()相关推荐

最新文章

热门文章