为什么 `removeEventListener()` 在我的 JavaScript 代码中不起作用？

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

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

代码

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

<code class="javascript">area.addEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);</code>

问题

稍后在代码中尝试删除事件侦听器时会出现问题。

<code class="javascript">area.removeEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);</code>

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

解决方案

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

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

<code class="javascript">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);</code>

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

以上是为什么 `removeEventListener()` 在我的 JavaScript 代码中不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！