为什么我不能使用 off() 删除事件侦听器？答案

【问题标题】：Why can't I remove event listeners using off()?为什么我不能使用 off() 删除事件侦听器？
【发布时间】：2020-04-18 03:37:40
【问题描述】：

我正在尝试从 DOM 中动态删除一个事件。为此，我正在使用 Chrome（版本 79）开发工具，页面 https://www.omgubuntu.co.uk/category/news?utm_source=menu

在“元素”选项卡中，我转到“事件侦听器”并查找“加载”事件，然后在 Window 元素上找到 3 个事件。所以在控制台中，我输入：

$(window).off('load');

命令执行没有错误，但似乎没有任何改变，即使我按下事件部分中的刷新按钮也是如此。我希望 Window 的所有“加载”事件都会消失。

我在许多其他网站上也有同样的问题，但在我的本地网页上工作正常（这就是我知道我使用 JQuery 的正确方式）...

【问题讨论】：

“即使我按下刷新按钮”刷新页面也会重新执行其上的所有 JavaScript，包括添加任何事件处理程序。
使用.off，您只能删除由 jQuery 附加的侦听器。
请记住，有时window. 属性在您在控制台中键入它们时不会按您期望的方式工作，因为控制台（出于某些目的）是一个单独的窗口对象，与持有您的对象的窗口对象不同。文件。
@NathanHawks 我认为情况并非如此。控制台没有自己的 window 对象。
@ScottMarcus 我通过 localStorage 的行为获得了这个“知识”，但也许这是一个特例。至少在 JSFiddle 中，具有工作 localStorage 的应用程序在控制台中返回未定义的。但我可能读得太多了。

【解决方案1】：

.off() 仅移除通过.on() 方法添加的事件，因此任何使用其他 API 添加的事件都不会受到影响。

现在，当您说 即使我按下事件部分中的刷新按钮时。我预计 Window 的所有“加载”事件都会消失。，您误解了页面处理方式的性质。如果您刷新页面，其所有代码都会再次处理，因此即使您成功删除了控制台中的处理程序，它们也会全部返回，因为页面重新开始。

了解您在控制台中执行的操作只会影响浏览器中加载的页面的当前实例。

【讨论】：

【解决方案2】：

要删除现有的侦听器，请使用getEventListeners 命令行 API：

getEventListeners(window).load.forEach(x=>window.removeEventListener('load',x.listener))

或者直接点击 Elements Event listeners 面板中的 Remove 按钮：

【讨论】：