JavaScript中的EventListener删除问题：为什么removeEventListener()失败

在JavaScript中，事件监听器使开发人员能够监视DOM元素事件，例如单击、鼠标移动等更多的。虽然附加事件侦听器相当简单，但删除它有时会带来挑战。

代码

原始代码在单击时将事件侦听器添加到名为区域的元素。

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);

但是，事件侦听器仍处于附加状态，无法将其删除。

解决方案

此问题的原因在于事件侦听器的附加方式。每个不同的函数实例都会创建一个单独的事件侦听器。在这种情况下，使用两个匿名函数来添加和删除侦听器。

要解决此问题，请确保用于删除的函数引用与用于添加侦听器的函数引用相同。

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

// Add event listener
area.addEventListener('click', handleClickListener, true);

// Remove event listener
area.removeEventListener('click', handleClickListener, true);

通过对两个操作使用相同的函数引用，JavaScript 可以在调用时正确删除事件侦听器。