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 相关文章推荐
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
JavaScript 消息框效果【实现代码】
Apr 27 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
jquery常用的12个小功能
Jul 22 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
JavaScript实现图片放大预览效果
Nov 02 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
图解js图片轮播效果
2015/12/20 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
js实现移动端吸顶效果
2020/01/08 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
解决python replace函数替换无效问题
2020/01/18 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
俄罗斯游戏商店:Buka
2020/03/01 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
平安工地建设方案
2014/05/06 职场文书
精神文明建设标语
2014/06/16 职场文书
期末考试复习计划
2015/01/19 职场文书