多久会持续.WIndow事件监听器的存在

Question

有人知道窗口事件监听器应该持续多长时间吗？

我的初步想法是，任何附加到文档的监听器在页面重新加载后可能会丢失，而我希望那些附加到窗口对象上的监听器能够在页面重新加载后保持。

然而，测试似乎表明当页面重新加载时，所有的事件监听器都被销毁了，这是正确的吗？

- NickC

Answer 1

只要以下条件之一满足，元素上的事件监听器就会持久存在：

1. 它们没有被移除。

2. 元素继续存在。

重新加载页面将销毁页面当前的元素，并从头开始构建新元素，因此事件监听器无法幸存。 （它还会摧毁与页面关联的JavaScript环境，所以如果处理程序在该环境中，它们也会停止存在。）

- T.J. Crowder

---

比我的评论更详细一些，点赞了并删除了评论。 - Asons

非常感谢T.J. Crowder，重新加载会破坏JavaScript环境，这就解释了为什么在重新加载时window.addEventListener事件会被销毁。非常有帮助的解释。 - NickC

@NickC：不要忽略元素的部分，这同其他部分一样是断开连接的来源。如果你在不破坏JavaScript环境的情况下销毁元素（例如通过innerHTML），处理程序仍然会断开连接。 - T.J. Crowder

如果在堆栈中导航到新页面，事件侦听器是否会持久存在？（传统的Web开发）。我想应该是这样的。那么像使用React构建的单页应用程序呢？由于页面永远不会重新加载，只有数据会重新加载，因此我们必须在回调函数中清理事件侦听器。对吗？ - Jo Momma

@JoMomma - “如果在堆栈中导航到新页面，事件侦听器是否会持久存在？（传统的Web开发）。”不会，因为元素不再存在。 “那么像使用React构建的单页应用程序呢？由于页面永远不会重新加载，只有数据，我们必须在回调函数中清理事件侦听器。对吗？”这取决于您如何附加侦听器。如果您使用React的onXyz属性进行操作，则不需要。如果您实际上使用了addEventListener（例如，在componentDidMount中），则最好使用removeEventListener（例如，在... - T.J. Crowder

如果元素将被移除，那么在componentWillUnmount生命周期方法中移除事件处理程序并不是必须的。但是，你无法确定元素是否会被移除，因此最好还是移除事件处理程序。 - T.J. Crowder