解决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 相关文章推荐
url地址自动加#号问题说明
Aug 21 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 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
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
python采集博客中上传的QQ截图文件
2014/07/18 Python
python制作一个桌面便签软件
2015/08/09 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
详解python之协程gevent模块
2018/06/14 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
python 实现两个线程交替执行
2020/05/02 Python
python collections模块的使用
2020/10/16 Python
应届生的求职推荐信范文
2013/11/30 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
求职个人评价范文
2014/04/09 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
爱国主义演讲稿
2014/05/07 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
pycharm代码删除恢复的方法
2021/06/26 Python