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

2024-10-17 17:29:45

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 无法清除监听的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

vue中是怎样监听数组变化的

我们知道通过Object.defineProperty()劫持数组为其设置getter和setter后,调用的数组的push.splice.pop等方法改变数组元素时并不会触发数组的setter,这就会造成使用上述方法改变数组后,页面上并不能及时体现这些变化,也就是数组数据变化不是响应式的(对上述不了解的可以参考这篇文章).但实际用vue开发时,对于响应式数组,使用push.splice.pop等方法改变数组时,页面会及时体现这种变化,那么vue中是如何实现的呢? 通过vue源码可以看出,vue
vue深度监听(监听对象和数组的改变)与立即执行监听实例

1.vue中监听对象数据属性值的改变,可以使用深度监听 data () { return { form: { status: '', cpufrequency: '', systemstacksize: '', scalabilityclass: '' } } }, watch: { form: { // 深度监听 handler(val, oldVal){ console.log('currentForm',val, oldVal) // 但是这两个值打印出来却都是一样的,因为它们的引用指向同
vue监听浏览器原生返回按钮,进行路由转跳操作

今天测试给我报了个bug说点击浏览器返回页数据显示的不对,我查了半天原因:需要监听浏览器的回退按钮,并阻止其默认事件. 具体操作方法如下: 1.挂载完成后,判断浏览器是否支持popstate mounted(){ if (window.history && window.history.pushState) { history.pushState(null, null, document.URL); window.addEventListener('popstate', this.canc
vue 手机物理监听键+退出提示代码

我就废话不多说了,大家还是直接看代码吧~ <script> //Toast 这些都是在网上粘的别人的.但是找不到出处了,大佬见谅. function Toast(msg,duration){ duration=isNaN(duration)?3000:duration; var m = document.createElement('div'); m.innerHTML = msg; m.style.cssText="width: 60%;min-width: 150px;opaci
vue任意关系组件通信与跨组件监听状态vue-communication

众所周知,组件式开发方式给我们带来了方便,不过也引入了新的问题,组件之间的数据就像被一道无形的墙隔开,如果我们希望临时让两个组件直接通信,vuex 太巨,而 $emit 又不好维护 provider 不可控这个时候就该今天的主角 vue-communication 登场了! vue-communication介绍他是一个可观测可调试的vue组件通信方案任意关系组件可直接通信支持跨组件监听数据变化支持发送离线数据安装 yarn add vue-communication // 或者 n
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码

utils/index,.js /** * 生成UUID * @param withSeparator 是否有分割符 * @returns {string} */ export function generateUUID(withSeparator = true) { let d = new Date().getTime() if (window.performance && typeof window.performance.now === 'function') { d += perf
解决removeEventListener 无法清除监听的问题

1. 原因许多入前端不久的人都会遇到 removeEventListener 无法清除监听的情况,这是由于要移除事件句柄,addEventListener() 的执行函数必须使用外部函数,如上实例所示 (myFunction). 匿名函数,类似 "document.removeEventListener("event", function(){ myScript });" 该事件是无法移除的. 而在很多情况下我们需要句柄回调的传参,又需要其他传参时免不了使用句柄
关于js中removeEventListener取消事件监听的坑

从addEventListener说起,上代码 onMounted(() => { window.addEventListener("click", ()=>{ doSth(param)//param为参数 }) }) addEventListener有一个箭头函数回调函数,这个函数本身不能传参(当然event除外),如果你要传参,只能在doSth函数上传,我们也可以将箭头函数回调函数替换成一个函数,但是这个函数明显不能有参数 onMounted(() => { wi
Android中解决WebView上下滑动监听问题

有些时候我们需要监听webview的滚动事件,但WebView没有直接监听滑动的方法,看WebView的源码则会发现有一个protected void onScrollChanged(int l, int t, int oldl, int oldt)方法. 这个方法.是受到保护的所以我们无法直接使用,所以我们写一个加强的WebView,重写onScrollChanged方法并利用接口回调. public class NewWebView extends WebView{ private OnSc
React如何实现全屏监听Esc键

目录全屏监听Esc键全屏与退出全屏监听退出全屏事件 React添加监听事件监听键盘事件 react添加监听事件监听键盘事件全屏监听Esc键全屏与退出全屏 if (isFull) { document.exitFullscreen(); } else { tree.current.requestFullscreen(); tree.current.style.width = '100%' } }; 监听退出全屏事件退出方式有两种
JS监听事件的叠加和移除功能

html DOM元素有很多on开头的监听事件,如onload.onclick等,见DOM事件列表.但是同一种事件,后面注册的会覆盖前面的: window.onresize = function(){ alert(1); } window.onresize = function(){ alert(2); } // 改变窗口大小时,只会弹出2 addEventListener监听利用addEventListener添加监听事件,可以重复添加,并不会互相覆盖: window.addEventList
Angular2监听页面大小变化的解决方法

一.现象全屏页面中的图表,在很多的时候需要 resize 一把,以适应页面的大小变化二.解决 1.引入 : import { Observable } from 'rxjs'; 2.使用(在ngOnInit方法中): ngOnInit() { // 页面监听 Observable.fromEvent(window, 'resize') .debounceTime(100) // 以免频繁处理 .subscribe((event) => { // 这里处理页面变化时的操作 console.lo
连接Oracle数据库时报ORA-12541:TNS:无监听程序的图文解决教程

在用PL/SQL Developer等客户端工具连接oracle服务器时出现ORA-12541:TNS:无监听程序的错误,如下图: 发现原来是oracle的监听没有启动,重启监听后就连接成功了,下面跟大家分享一下如何启动oracle的监听. 1.在安装Oracle服务器的主机上,打开Net Configuration Assistant 2.选择监听程序配置,下一步 3.选择重新配置,下一步 4.选择监听程序,默认,下一步注:如果你的监听已启动,则出现提示框,选择是 5.选择协议,使用默认的T
JavaScript监听手机物理返回键的两种解决方法

JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventListener("popstate", function(e) { window.location = 'http://www.baidu.com'; }, false); function pushHistory() { var state = { title: "title&quo
MySQL 启动成功但未监听端口的解决方法

问题描述 MySQL 启动成功,使用 ps -ef |grep mysql 可以看到进程,如下图: 也可以在服务器登陆,如下图: 但是使用 netstat -antp| grep 3306 可以看到没有监听端口. 查看 MySQL 配置文件,端口也没有更改. 解决办法检查发现是配置文件中使用了 skip-networking,可以看到这个选项的的作用是不监听端口,同主机的用户通过 sockets 进行链接.外部主机由于没有监听端口,将无法连接. 将 skip-networking 注释掉之后,
Android onKeyDown监听返回键无效的解决办法

Android onKeyDown监听返回键无效的解决办法当我们的Activity继承了TabActivity,在该类中重写onKeyDown是监听不到返回键的, 具体解决方法如下: 重写dispatchKeyEvent /** * 退出 */ @Override public boolean dispatchKeyEvent(KeyEvent event) { if (event.getKeyCode() == KeyEvent.KEYCODE_BACK && event.getAc

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

相关推荐

随机推荐