解决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 相关文章推荐
javascript fullscreen全屏实现代码
Apr 09 Javascript
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
jquery不常用方法汇总
Jul 26 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
js校验开始时间和结束时间
May 26 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
JS猜数字游戏实例讲解
Jun 30 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
PHP4之COOKIE支持详解
2006/10/09 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
超级强大的表单验证
2006/06/26 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
python登录QQ邮箱发信的实现代码
2013/02/10 Python
python实现在windows服务中新建进程的方法
2015/06/30 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
python的变量与赋值详细分析
2017/11/08 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
Python如何批量生成和调用变量
2020/11/21 Python
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
战略合作意向书
2014/07/29 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python