Javascript 在两个不同的模块中调用addEVentListener和removeEventListener

本文档提到，要删除

eventListener

，处理程序函数必须完全相同

我有两个模块：

module1.js

const module2 =require('./module2');
let myButton = document.getElementById("testButton")
myButton.addEventListener("click", module2.clickHandler.bind(null, myButton.value))

const clickHandler = (buttonValue) => {
 ...do something...
}

const unrelatedHandler = (someVar) => {
   let myButton = document.getElementById("testButton")
   myButton.removeEventListener("click", clickHandler.bind(null, myButton.value))
   ...do the rest of the intended tasks...
}

然后，在

module2.js中

const module2 =require('./module2');
let myButton = document.getElementById("testButton")
myButton.addEventListener("click", module2.clickHandler.bind(null, myButton.value))

const clickHandler = (buttonValue) => {
 ...do something...
}

const unrelatedHandler = (someVar) => {
   let myButton = document.getElementById("testButton")
   myButton.removeEventListener("click", clickHandler.bind(null, myButton.value))
   ...do the rest of the intended tasks...
}


在
module2
中，我有
unrelatedHandler
，用于删除
myButton
的事件侦听器。但是，如上所述调用
removeEVentListener
并不会将其删除。这是在一个Electron应用程序中，由于其框架，
module1.js
在启动时立即执行。
module2.js中的函数可以在启动后执行

如何使用来自两个不同模块的相同处理程序调用
removeEventListener
？谢谢
（顺便说一句，module1.js是电子应用程序的渲染器）。
问题是调用.bind会创建一个新函数；这意味着当您调用removeEventListener时，您正在传递一个新函数

您应该存储对第一个绑定调用的引用：

const myBtnFunc = module2.clickHandler.bind(null, button.value);
myButton.addEventListener("click", myBtnFunc);

并使用相同的引用调用removeEventListener

myButton.removeEventListener("click", myBtnFunc))

参考：