如何知道 removeEventListener 是否成功？

Question

有没有一种方法可以确认removeEventListener是否成功？我正在将其用于视频元素的“playing”/“pause”事件上。我试图实现的行为似乎不太一致。以下是我使用它的示例。

var playListener = function(){
  console.log("video is playing") 
}

videoElement.addEventListener("playing", playListener)

在我的代码中的其他地方

videoElement.removeEventListener("playing", playListener)

我正在使用removeEventListener并传递视频元素的ID，因此playListener可用。 我想知道是否可以做某种console.log或其他操作来确认 removeEventListener 是否起作用。

- Ephapox

---

这个概念让我有些困惑：移除一个监听器需要传入完全相同的函数作为参数。所以，如果你传递的是一个绑定函数（playListener.bind(this)），它并不是完全相同的函数（绑定会复制原始函数，包括自己的内存分配）。因此，你必须将函数预先绑定到另一个变量上，然后使用预先绑定的函数来添加和移除。 - bob

Answer 1

不幸的是，removeEventListener方法在未成功移除事件监听器时不会返回任何内容或抛出错误。同时，也没有JavaScript方法可以访问给定元素当前设置的事件监听器。

至于调试您的问题，大多数现代浏览器的开发者工具都提供了查看事件监听器的功能。您可以在代码中放置一个debugger语句（或设置一个断点），以在调用removeEventListener之前立即暂停执行：

debugger;
videoElement.removeEventListener("playing", playListener);

一旦达到断点并暂停执行，可以在Chrome Dev Tools的元素选项卡中检查事件监听器以验证您的事件监听器当前是否已设置：

您也可以在Firefox Dev Tools的检查器选项卡中找到事件监听器：

验证您的事件监听器当前已设置后，返回调试器（Chrome "Sources" 选项卡 / Firefox "Debugger" 选项卡），逐行步进代码（按下 F10）。

在调用removeEventListener之后，返回并再次检查您的事件监听器。如果成功，则应不再设置您的事件监听器。完成调试后，您可以恢复代码执行（按下 F8）。

- nderscore

---

你可以分享微软Edge浏览器的类似屏幕截图吗？ - Richard