Javascript removeEventListener无法正常工作

Question

我有以下代码来添加eventListener

 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()有什么问题吗？注意:这里的区域类似于document.getElementById('myId')

Answer 1

这是因为两个匿名函数是完全不同的函数.您removeEventListener的参数不是对先前附加的函数对象的引用.

function foo(event) {
              app.addSpot(event.clientX,event.clientY);
              app.addFlag = 1;
          }
 area.addEventListener('click',foo,true);
 area.removeEventListener('click',foo,true);

Answer 2

在 React 函数组件中，确保使用钩子定义回调useCallback(() => {})。如果您不这样做，则每次重新渲染时回调都会不同，并且该removeEventListener方法将不起作用。

const scrollCallback = useCallback(() => { // do sth. }, []);
window.addEventListener("scroll", scrollCallback, true);
window.removeEventListener("scroll", scrollCallback, true);

Answer 3

看起来没有人涉及 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甚至无法正常工作”：

{
    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)
}

现在，当需要删除该事件侦听器时，我们只需运行：

const areaListener = new AbortController();

area.addEventListener(
  `click`,
  ({clientX: x, clientY: y}) => {
    app.addSpot(x, y);
    app.addFlag = 1;
  },
  { signal: areaListener.signal }
);

完成：JS 引擎将中止并清理我们的事件监听器。不保留对处理函数的引用，也不确保我们使用removeEventListener与调用完全相同的函数和属性进行调用addEventListener：我们只是通过单个无参数中止调用来取消侦听器。

当然，还要注意，如果我们想这样做“因为我们只想让处理程序触发一次”，那么我们甚至不需要这样做，我们只需创建一个事件监听器{ once: true }，JS就会处理其余的部分。无需删除代码。

areaListener.abort()

Answer 4

我发现对于 windows 对象，最后一个参数“true”是必需的。如果没有捕获标志，则删除不起作用。

Answer 5

您将在两个调用中创建两个不同的函数。因此，第二功能与第一功能没有任何关系，引擎能够删除该功能。请使用该函数的通用标识符。

var handler = function(event) {
              app.addSpot(event.clientX,event.clientY);
              app.addFlag = 1;
          };
area.addEventListener('click', handler,true);

稍后您可以通过调用删除处理程序

area.removeEventListener('click', handler,true);

Answer 6

要删除它，请将函数存储在变量中，或者简单地使用命名函数并将该函数传递给调用removeEventListener：

function areaClicked(event) {
    app.addSpot(event.clientX, event.clientY);
    app.addFlag = 1;
}

area.addEventListener('click', areaClicked, true);
// ...
area.removeEventListener('click', areaClicked, true);