addEventListener时使用bind(this),后面无法用removeEventListener移除

问题

在使用addEventListenerDOM元素绑定事件时,使用了bind(this)来改变函数内的this指向。然后使用removeEventListener对事件进行解绑时,发现解绑失败。

原因

假如使用addEventListener绑定事件时,传递的是匿名函数,那么使用removeEventListener是无法解绑事件的(没有具体的指向,程序怎么知道要对那个函数进行解绑呢)。而使用bind方法更改函数内部的this指向,其实是会返回一个新的函数。所以当我们直接在addEventListener传参时调用bind方法(DOM.addEventListener('click', fn.bind(this)))就会导致我们事实上绑定了一个匿名函数,所以在removeEventListener时无法解绑相应的函数。

解决方法

在进行事件绑定之前,先用变量记录下bind方法产生的匿名函数。然后在addEventListener绑定事件时,传递这个变量作为参数。当解绑时,再传递这个变量进去,就可以顺利解绑了。

function fn () {}
const fnBindCallBack = fn.bind(this) // 关键在这里DOM.addEventListener('click', fnBindCallBack)DOM.removeEventListener('click', fnBindCallBack)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/185732.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python基础语法之学习字符串快速格式化

Python基础语法之学习字符串快速格式化 一、代码二、效果 一、代码 # 通过f"{占位}"控制字符串快速格式化,不做精度控制 name "张三" age 13 money 12.5 text f"姓名是{name},年龄是{age},钱是{money}" print(text)二、效果 每一天都是一个…

MySQL处理并发访问和高负载的关键技术和策略

我深知在数据库管理中处理并发访问和高负载的重要性。在这篇文章中,我将探讨MySQL处理并发访问和高负载的关键技术和策略,以帮助读者更好地优化数据库性能。 图片来源:MySQL处理并发访问和高负载的关键技术和策略 MySQL数据库在处理并发访问…

iptables防火墙之SNAT与DNAT

1. SNAT SNAT 应用环境:局域网主机共享单个公网IP地址接入Internet (私有IP不能在Internet中正常路由) SNAT原理:源地址转换,根据指定条件修改数据包的源IP地址,通常被叫做源映射。 数据包从内网发送到公网时,SNAT会把数据包的源IP由私网IP…

python技术栈之单元测试中mock的使用

什么是mock? mock测试就是在测试过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便测试的测试方法。 mock的作用 特别是开发过程中上下游未完成的工序导致当前无法测试,需要虚拟某些特定对象以便测试…

git新建分支和合并fork分支

git新建分支和合并fork分支 1.新建和删除分支2.回滚代码3.合并分支4.删除分支5.仓库迁移 1.新建和删除分支 git checkout --orphan emptybranch git rm -rf . echo # new branch >> README.md git add README.md git commit -m new branch git push origin emptybranch2…

基于Java SSM框架+Vue实现垃圾分类网站系统项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架Vue实现垃圾分类网站系统演示 摘要 本论文主要论述了如何使用JAVA语言开发一个垃圾分类网站 ,本系统将严格按照软件开发流程进行各个阶段的工作,采用B/S架构,面向对象编程思想进行项目开发。在引言中,作者将论述…

Python快速实现BMI(身体质量指数)计算器(窗口界面形式)

BMI是身体质量指数(Body Mass Index)的缩写,是一种衡量人体肥胖程度的指标。它是根据人的身高和体重计算得出的,公式为: BMI 体重(kg)/ 身高^2(m) 其中,体…

NDK代码编译的方式,ndk-build,Cmake,独立工具链分别有什么区别

NDK代码编译的方式有三种,分别是基于Make的ndk-build,CMake,以及独立工具链。它们的区别如下: 基于Make的ndk-build是Android NDK r4引入的一个shell脚本,它使用Android.mk和Application.mk文件来描述编译参数和配置&…

【UE】透视效果

效果 步骤 1. 新建一个空白工程 2. 添加一个第三人称游戏和初学者内容包到内容浏览器 3. 新建一个材质,这里命名为“M_Perspective” 打开“M_Perspective”,设置材质域为后期处理 添加三个“SceneTexture”节点,场景纹理ID选项分别设置为“…

【同济大学主办】第七届先进算法与控制工程国际学术会议(ICAACE 2024)

第七届先进算法与控制工程国际学术会议(ICAACE 2024) 2024 7th International Conference on Advanced Algorithms and Control Engineering 第七届先进算法与控制工程国际学术会议(ICAACE 2024)定于2024年1月26-28日在中国上…

python中的enumerate函数

enumerate函数是Python内置builtins模块中的一个函数,用于将一个可迭代对象转换为一个索引-元素对的枚举对象,从而方便地同时获得索引和元素,并在循环迭代中使用。 enumerate函数的语法格式为:enumerate(iterable, start0) itera…

软件开发流程:基础源代码与实战详解

一、引言 在当今的信息时代,软件开发已成为推动社会进步和发展的重要力量,从智能手机应用程序到复杂的企业级系统,软件开发在我们的日常生活和工作中发挥着越来越重要的作用。 然而,对于初学者来说,了解软件开发流程…

【设计模式】03:单例模式

单例模式 OVERVIOW 单例模式1.单例模式实现2.饿汉与懒汉(1)饿汉模式(2)懒汉模式 3.懒汉线程安全1(1)引入互斥锁(2)引入双重检查锁定(3)引入原子变量 4.懒汉线…

Jmeter接口自动化测试断言之Json断言

json断言可以让我们很快的定位到响应数据中的某一字段,当然前提是响应数据是json格式的,所以如果响应数据为json格式的话,使用json断言还是相当方便的。 还是以之前的接口举例 Url: https://data.cma.cn/weatherGis/web/weather/weatherFcst…

2023/11/30JAVAweb学习

数组json形式 想切换实现类,只需要只在你需要的类上添加 Component 如果在同一层,可以更改扫描范围,但是不推荐这种方法 注入时存在多个同类型bean解决方式

一些好用的12款前端小插件

1. cropper.js Cropper.js 2.0 是一系列用于图像裁剪的 Web 组件。 官网地址:https://fengyuanchen.github.io/cropperjs/v2/zh/ 2. Vditor Vditor是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分…

JavaEE——简单认识CSS

文章目录 一、简单了解什么是 CSS二、CSS 选择器1.标签选择器2.类选择器3.ID 选择器4.后代选择器5.子选择器6.伪类选择器 三、字体属性1.设置字体家族2.设置字体大小3.设置字体粗细4.文字倾斜 四、文本属性1.文本对齐2.文本装饰3.文本缩进4.背景设置 五、圆角矩形六、CSS 盒子模…

【编码艺术:掌握String类函数接口的妙用指南】

【本节目标】 1. 为什么要学习string类 2. 标准库中的string类 1. 为什么要学习string类 1.1 C语言中的字符串 C语言中,字符串是以\0结尾的一些字符的集合,为了操作方便,C标准库中提供了一些str系列的库函数, 但是这些库函数与…

【JavaFX漏扫开发基础】screen类的使用

文章目录 一、screen获取屏幕信息二、查看当前屏幕的分辨率DPI三、scene类和两个小知识一个图形化的结构让界面打开一个网页改变鼠标的图案一、screen获取屏幕信息 package javafx.test;import javafx.application.Application; import

SpringBoot项目发送邮件

📑前言 本文主要是【SpringBoot】——SpringBoot项目发送邮件的文章,如果有什么需要改进的地方还请大佬指出⛺️ 🎬作者简介:大家好,我是听风与他🥇 ☁️博客首页:CSDN主页听风与他 &#x1f3…