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 相关文章推荐
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 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 db类库进行数据库操作
2009/03/19 PHP
基于php-fpm的配置详解
2013/06/03 PHP
php分页函数示例代码分享
2014/02/24 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
javascript数组排序汇总
2015/07/07 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
Vue header组件开发详解
2018/01/26 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python中集合类型(set)学习小结
2015/01/28 Python
python 调试冷知识(小结)
2019/11/11 Python
python图片合成的示例
2020/11/09 Python
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
常见的软件开发流程有哪些
2015/11/14 面试题
偷看我的初中毕业鉴定
2014/01/29 职场文书
安全生产活动月方案
2014/03/09 职场文书
文化活动实施方案
2014/03/28 职场文书
入党积极分子评语
2014/05/04 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
2014年班级工作总结
2014/11/14 职场文书
长城导游词400字
2015/01/30 职场文书
感动中国何玥观后感
2015/06/02 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
redis 解决库存并发问题实现数量控制
2022/04/08 Redis