addEventListener()与removeEventListener()解析


Posted in Javascript onApril 20, 2017

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

最后这个布尔值参数是true,表示在捕获阶段调用事件处理程序;
如果是false(false- 默认),表示在冒泡阶段调用事件处理程序。

addEventListener的参数一共有三个,语法为:
element.addEventListener(type,listener,useCapture)

下面是详解:
1、其中element是要绑定函数的对象。
2、type是事件名称,要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on"。
3、listener当然就是绑定的函数了,记住不要跟括号
4、最后一个参数是个布尔值,表示该事件的响应顺序,下面重点介绍一下addEventListener的第3个参数(useCapture)。

要在按钮上为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看似使用了相同的参数
但实际上,第二个参数与传入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()中用来相同的函数。
实验结果是,用户点击button时,每次都会输出"I have been clicked!",说明removeEventListener()函数没有起到作用。 

通过查找资料,得出结论。在使用removeEventListener()函数时,handler函数,必须和使用addEventListener()里面的handler函数必须相同。

所以上面写的代码是错误的。修正之后的代码应该如下:

//addEventListener()和removeEventListener()中handler函数必须相同,移除事件函数才有效。
function myhandler(){
  console.log("I have been clicked!");
  document.getElementById('info').removeEventListener('click',myhandler,false);
}
var target=document.getElementById('info');
target.addEventListener("click", myhandler, false);
target.removeEventListener("click", myhandler, false); //有效!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
奇妙的js
Sep 24 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
javascript开发技术大全 第4章 直接量与字符集
Jul 03 Javascript
加载 Javascript 最佳实践
Oct 30 Javascript
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
jQuery中offset()方法用法实例
Jan 16 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 #Javascript
js禁止浏览器的回退事件
Apr 20 #Javascript
vue-cli入门之项目结构分析
Apr 20 #Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 #Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 #Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 #Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 #Javascript
You might like
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
javascript中数组的常用算法深入分析
2019/03/12 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python 字符串中的字符倒转
2008/09/06 Python
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
简单了解python的一些位运算技巧
2019/07/13 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
如何实现jdbc性能优化
2012/07/30 面试题
注塑工厂厂长岗位职责
2013/12/02 职场文书
诚信贷款承诺书
2014/05/30 职场文书
妇女工作先进事迹
2014/08/17 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
个人职业及收入证明
2014/10/13 职场文书
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
Python如何使用循环结构和分支结构
2022/04/13 Python