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 相关文章推荐
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 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 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
php中使用websocket详解
2016/09/23 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
js和as的稳定传值问题解决
2013/07/14 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
一年级语文教学反思
2014/02/13 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
企业计划生育责任书
2015/05/09 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
家访教师心得体会
2016/01/23 职场文书
教师师德承诺书2016
2016/03/25 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS