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 相关文章推荐
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
Underscore之Array_动力节点Java学院整理
Jul 10 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
Vue2.0系列之过滤器的使用
Mar 01 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 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中改变图片的尺寸大小的代码
2011/07/17 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
Python饼状图的绘制实例
2019/01/15 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
详解python播放音频的三种方法
2019/09/23 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
如何进行有效的自我评价
2013/09/27 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
高一新生军训方案
2014/05/12 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
公司经理任命书
2014/06/05 职场文书
交通事故案件代理词
2015/05/23 职场文书
公司备用金管理制度
2015/08/04 职场文书