我有以下代码来添加事件监听器
area.addEventListener('click',function(event) {
app.addSpot(event.clientX,event.clientY);
app.addFlag = 1;
},true);
它按预期正常工作。稍后在另一个函数中，我尝试使用以下代码删除事件侦听器:
area.removeEventListener('click',function(event) {
app.addSpot(event.clientX,event.clientY);
app.addFlag = 1;
},true);
但是事件监听器并没有被移除...为什么会发生这种情况？我的removeEventListener()有问题吗？ 注意：这里的area类似于document.getElementById('myId')
这是因为两个匿名函数是完全不同的函数，你的 removeEventListener 参数并不是之前附加的函数对象的引用。
function foo(event) {
app.addSpot(event.clientX,event.clientY);
app.addFlag = 1;
}
area.addEventListener('click',foo,true);
area.removeEventListener('click',foo,true);
bindAPI绑定this后，函数的签名会发生变化。因此，在绑定this之后，总是将函数分配给一个变量，以便在removeListener中使用相同的变量。在TypeScript中，这个问题会更加明显。 - NiRUSfoo(1)。 - IC_this.onClick = this.onClick.bind(this)，然后在任何监听器之前添加 btn.addEventListener('click', this.onClick)，最后使用 btn.removeEventListener('click', this.onClick)。 - joseluisqfoo = (argumentToPass) => (event) => { doSomething(); }，然后 xyz.addEventListener('click', foo('myarg'), true);。foo('myarg') 将返回另一个函数，其中 argumentToPass 设置为 myarg。只需记住在实际代码中保留对 fn 的引用即可 :-) - raven-kinguseCallback(() => {})钩子来定义回调函数。如果你没有这样做，每次重新渲染时回调函数都会是不同的，导致removeEventListener方法无法正常工作。const scrollCallback = useCallback(() => { // do sth. }, []);
window.addEventListener("scroll", scrollCallback, true);
window.removeEventListener("scroll", scrollCallback, true);
看起来没有人涵盖了DOM规范的这一部分（浏览器和Node.js都实现了），它现在提供了一种机制，可以在不使用removeEventListener的情况下删除事件监听器。
如果我们查看https://dom.spec.whatwg.org/#concept-event-listener，我们会发现在设置事件监听器时可以传递许多属性选项：
{
type (a string)
callback (an EventListener object, null by default)
capture (a boolean, false by default)
passive (a boolean, false by default)
once (a boolean, false by default)
signal (an AbortSignal object, null by default)
removed (a boolean for bookkeeping purposes, false by default)
}
在这个列表中有很多有用的属性，但是为了移除一个事件监听器，我们需要使用其中的signal属性（它在2020年末添加到DOM级别3中），因为它让我们可以使用AbortController来移除事件监听器，而不必去麻烦地保留对确切处理函数和监听器选项的引用，“否则removeEventListener甚至都无法正常工作”：
const areaListener = new AbortController();
area.addEventListener(
`click`,
({clientX: x, clientY: y}) => {
app.addSpot(x, y);
app.addFlag = 1;
},
{ signal: areaListener.signal }
);
现在，当我们需要移除事件监听器时，只需运行：
areaListener.abort()
好了：JS引擎将中止并清除我们的事件监听器。无需保留对处理函数的引用，也无需确保我们调用removeEventListener时使用与所调用addEventListener相同的函数和属性：我们只需通过单个、无参数的中止调用取消监听器。
当然，如果我们想要这样做“因为我们只想让处理程序触发一次”，那么我们甚至不需要这样做，我们可以使用{ once: true }创建一个事件监听器，JS会处理其余事项。无需删除代码。
area.addEventListener(
`click`,
() => app.bootstrapSomething(),
{ once: true }
);
你在两次调用中创建了两个不同的函数。因此，第二个函数与第一个函数没有任何关系，引擎可以移除该函数。请改用共同的标识符来表示该函数。
var handler = function(event) {
app.addSpot(event.clientX,event.clientY);
app.addFlag = 1;
};
area.addEventListener('click', handler,true);
area.removeEventListener('click', handler,true);
如果想要移除它，请将函数存储在变量中，或者直接使用一个命名函数并将其传递给 removeEventListener 方法调用：
function areaClicked(event) {
app.addSpot(event.clientX, event.clientY);
app.addFlag = 1;
}
area.addEventListener('click', areaClicked, true);
// ...
area.removeEventListener('click', areaClicked, true);
function yourFunction () {
var app;
function waitListen () {
waitExecute(app, waitListen);
}
area.addEventListener('click', waitListen, true);
}
function waitExecute (app, waitListen) {
... // other code
area.removeEventListener('click', waitListen, true);
}
首先定义您的事件处理程序，
然后执行操作。
area.addEventListener('click',handler);
area.removeEventListener('click',handler);
我在window中使用全局变量来存储监听器回调函数。
window.logoutListener = () => {
// code
};
document.addEventListener('click', window.logoutListener, {
capture: true,
});
// ------- In other file, out of context --------
document.removeEventListener('click', window.logoutListener);
removeEventListener() 没有起作用的原因是因为第三个参数必须相同。
因此，为事件监听器选项指定相同的签名就可以解决问题了。
document.removeEventListener('click', window.logoutListener, {
capture: true,
});
我最近也遇到了同样的问题。我找到一个合理的解决方案是从HTMLElement类中删除元素上的"onclick"属性。
假设您已经从DOM获取了组件 - 使用document.getElementById或document.querySelector - 您可以尝试这个代码：
js
const element = document.getElementById("myelement");
element.attributes.removeNamedItem('onclick');
HTML 示例
<div onClick="memoryGame.flipCard(this)">
.... // children elements
</div>
我知道这个解决方案并不是最好的，但它能够工作！
希望我能够帮到你。
祝好！
附言：请给我一个“有用的答案”...谢谢:D