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 相关文章推荐
JavaScript的面向对象(一)
Nov 09 Javascript
网页设计常用的一些技巧
Dec 22 Javascript
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
浅谈Node.js 中间件模式
Jun 12 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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
php懒人函数 自动添加数据
2011/06/28 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
扩展String功能方法
2006/09/22 Javascript
javascript EXCEL 操作类代码
2009/07/30 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
利用JS实现数字增长
2016/07/28 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
Django中的forms组件实例详解
2018/11/08 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
利用python计算时间差(返回天数)
2019/09/07 Python
详解Django CAS 解决方案
2019/10/30 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
智能旅行箱:Horizn Studios
2018/04/30 全球购物
合伙协议书范本
2014/04/21 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
2015年暑假生活总结
2015/07/13 职场文书