.removeEventListener();通过名称或参考？

Question

假设你有简单的：

document.removeEventListener('click', clickHandler);

是否 removeEventListener 删除名为 clickHandler 的 click 事件的已注册侦听器，或者它是否删除引用与 [=] 完全相同的函数的 click 事件的已注册侦听器13=] 参考文献?

Here 他们说：

The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process

当他们说“事件侦听器函数本身”时，他们指的是同一个参考吗？

我问是因为我（在 React 项目中）有一个 memoized 函数，它删除了一堆事件侦听器，我想知道我需要多久获得一个新函数。

如果 removeEventListener 按名称删除处理程序，我可以将 useCallback 的依赖数组留空。
但是如果 removeEventListener 通过引用删除，我需要把所有的监听器放在依赖数组中。也许没有记忆我会过得更好。

Answer 1

您必须在调用 removeEventListener

时传递对用于 addEventListener 的同一函数的引用

Answer 2

在你的例子中 clickHandler 是一个 identifier。标识符无法转换为字符串，因此 JavaScript 无法记住之前是否使用过相同的标识符名称作为参数。它们只是供开发人员阅读的名称。

是的，您需要将引用传递给函数。即使您通过另一个标识符传递该引用。

function clickHandler() {
  console.log('Clicked!');
}

const buttonElement = document.querySelector('button');

buttonElement.addEventListener('click', clickHandler);

setTimeout(() => {
  const differentHandlerName = clickHandler;
  buttonElement.removeEventListener('click', differentHandlerName);
  console.log('Removed event listener via a different identifier name');
}, 2000);

<button>
  Click
</button>

.removeEventListener();通过名称或参考？

.removeEventListener(); by name or reference?

javascript

removeeventlistener