解决removeEventListener 无法清除监听的问题


Posted in Javascript onOctober 30, 2020

1. 原因

许多入前端不久的人都会遇到 removeEventListener 无法清除监听的情况,这是由于

要移除事件句柄,addEventListener() 的执行函数必须使用外部函数,如上实例所示 (myFunction)。

匿名函数,类似 “document.removeEventListener(“event”, function(){ myScript });” 该事件是无法移除的。

而在很多情况下我们需要句柄回调的传参,又需要其他传参时免不了使用句柄,这个时候我们需要写一个方法去替代这个回调,以下是解决方式,写了一个addListener 函数在 addEventListener 之后返回它的销毁方法

2.解决方式

function isFn(value) {
 const type = Object.prototype.toString.call(value);
 return type === '[object Function]';
}
function isNode(value) {
 return value !== undefined && value instanceof HTMLElement && value.nodeType === 1;
}

function listenNode(node, type, callback) {
 node.addEventListener(type, callback);
 return {
  destroy() {
   node.removeEventListener(type, callback);
  },
 };
}

function addListener(target, type, callback) {
 if (!target && !type && !callback) {
  throw new Error('缺少参数');
 }
 if (!isFn(callback)) {
  throw new TypeError('Third argument must be a Function');
 }
 if (isNode(target)) {
  return listenNode(target, type, callback);
 }
 throw new TypeError('First argument must be a String, HTMLElement, HTMLCollection, or NodeList');
}

function listenNodeList(nodeList, type, callback) {
 Array.prototype.forEach.call(nodeList, node => {
  node.addEventListener(type, callback);
 });

 return {
  destroy() {
   Array.prototype.forEach.call(nodeList, node => {
    node.removeEventListener(type, callback);
   });
  },
 };
}
module.exports = listener;

补充知识:vue 创建监听,和销毁监听(addEventListener, removeEventListener)

最近在做一个有关监听scroll的功能, 发现我添加监听之后一直不起作用:

mounted() {

window.addEventListener("scroll", this.setHeadPosition); //this.setHeadPosition方法名

后来发现要在后面添加一个true之后才行:

mounted() {
 window.addEventListener("scroll", this.setHeadPosition, true);
},

而在离开是的时候需要销毁监听: (在destroyed里面销毁), 否则监听会一直存在, 因为这是单页面应用, 页面并未关闭.

destroyed() {
 window.removeEventListener("scroll", this.setHeadPosition, true);
},

在销毁的时候一定也要加上true, 否则销毁不起作用.

以上这篇解决removeEventListener 无法清除监听的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
JavaScript 更严格的相等 [译]
Sep 20 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
canvas 实现中国象棋
Feb 17 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 Javascript
详解 javascript对象创建模式
Oct 30 #Javascript
ES6中的Javascript解构的实现
Oct 30 #Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 #Javascript
Echarts.js无法引入问题解决方案
Oct 30 #Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 #Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 #Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 #Javascript
You might like
初探PHP5
2006/10/09 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
python对文件的操作方法汇总
2020/02/28 Python
python实现扫雷小游戏
2020/04/24 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
配置管理计划的主要内容有哪些
2014/06/20 面试题
小学生班会演讲稿
2014/01/09 职场文书
优秀员工演讲稿
2014/05/19 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
求职信如何撰写?
2019/05/22 职场文书
小学四年级作文之写景
2019/08/23 职场文书
详解python的异常捕获
2022/03/03 Python
Docker安装MySql8并远程访问的实现
2022/07/07 Servers
MySQL深分页问题解决思路
2022/12/24 MySQL