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 插件实现图片延迟加载效果代码
Feb 06 Javascript
自写简单JS判断是否已经弹出页面
Oct 20 Javascript
js加强的经典分页实例
Mar 15 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
JavaScript Array对象详解
Mar 01 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 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
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
基于树莓派的语音对话机器人
2019/06/17 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
python-numpy-指数分布实例详解
2019/12/07 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
幼儿园大班毕业感言
2014/02/06 职场文书
电子信息工程专业推荐信
2014/02/14 职场文书
会务接待方案
2014/02/27 职场文书
打造高效课堂实施方案
2014/03/22 职场文书
四风自我剖析材料
2014/09/30 职场文书