解决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 相关文章推荐
web页面数据展示新想法(json)
Jun 08 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
canvas绘制的直线动画
Jan 23 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
vue配置接口域名方法总结
May 12 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
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
jQuery实现判断滚动条到底部
2015/06/23 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
python聊天程序实例代码分享
2013/11/18 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
Django中使用Celery的方法示例
2018/11/29 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
P/Invoke是什么
2015/07/31 面试题
副厂长岗位职责
2014/02/02 职场文书
幼儿园元旦亲子活动方案
2014/02/17 职场文书
经典广告词大全
2014/03/14 职场文书
单位委托书范本
2014/04/04 职场文书
设计专业自荐信
2014/06/19 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript