正在删除事件侦听器

Removing event listeners

本文关键字：侦听器 事件 删除      更新时间：2023-09-26

我有一个画布元素，在其中我使用WebGL绘制一些东西
根据绘制的内容，我将添加一个事件侦听器。

现在，当我重新绘制画布时，我想删除旧的事件侦听器并添加一个新的侦听器。

简单地这样做是行不通的：

canvas.removeEventListener("click", function(event){ 
                                        colorbarClicked(event, viewdata); 
                                    }, false);
canvas.addEventListener("click", function(event){ 
                                      colorbarClicked(event, viewdata); 
                                 }, false);

我认为这是因为colorbarClicked函数已经更改（可能是因为它的参数有不同的值？），并且与我想删除的旧函数不匹配。

所以我的问题是，每次我重新绘制事件时，监听器都会被添加，因此会加倍。但是colorbarClicked函数取决于画布中绘制的内容，所以我肯定需要更改它。

您需要记住添加时使用的函数，并在删除时再次使用相同的函数：

// Somewhere *outside* the code doing the adding/removing (in containing code)
var listener = null;
// In the code adding/removing
if (listener) {
    canvas.removeEventListener("click", listener, false);
}
listener = function(event){ colorbarClicked(event, viewdata); };
canvas.addEventListener("click", listener, false);

旁注：每次添加和删除处理程序似乎都很尴尬。通常，您只需要添加一次处理程序，并让它对您所做的任何更改做出响应。

您可以使用命名函数。举下面的例子：

function foo(){
  alert("this comes only once");
  this.removeEventListener('click', foo);
}
dude.addEventListener('click', foo);
<button id="dude">Click Me</button>

这里发生的是函数foo是在全局范围中定义的。它有自己独特的身份。该函数的基本功能是创建一个警报，然后将自己从按钮的click事件中删除。因此，当你点击它时，监听器会被删除，因此，你再也看不到它了

您的代码无法按预期工作，因为作为回调传递给addEventListener的函数没有唯一标识，Javascript也不知道要删除什么。

这个方法还防止回调hell：）

相关文章：