自定义元素:何时设置事件监听器

Custom elements: when to set up event listeners

自定义元素规范列表 "Requirements for custom element constructors"

在此,最后的咨询声明是

In general, the constructor should be used to set up initial state and default values, and to set up event listeners and possibly a shadow root.

现在,关于 Web 组件的生命周期,从 DOM 中删除自定义元素会调用 disconnectedCallback 生命周期挂钩。据我了解,这将是我删除自定义元素添加的任何事件侦听器的时间点

现在,如果我仍然保留对该元素的引用,稍后我将其放回 DOM,这将触发 connectedCallback 生命周期挂钩。

这是我的问题:如果建议在 constructor 中设置事件侦听器而不是在 connectedCallback 中(适当保护),重新引入的自定义元素将不会收到其之前被 disconnectedCallback.

清理过的听众

我觉得在构造函数中添加事件侦听器 建议——我从规范中引用了它——与设计的生命周期并没有很好地配合。

自定义元素是否根本不打算从 中删除,后来又重新引入 DOM?

有人知道如何解决这个问题吗?是否有关于附加和删除侦听器的某种最佳实践?

我倾向于将我的 addEventListener 个电话放在 connectedCallback 中。为什么他们以前?该控件不在 DOM 中,您无法与其交互。

我也把我的removeEventListeners放在disconnectedCallback里了。有时我什至可能在内部 DOM 复杂时清除内部 DOM.

有几个组件我在构造函数中添加了 addEventListener,但是:

1) 仅适用于影子DOM 2) 只有在我不关心自己删除它们的情况下,因为当内部 DOM 被垃圾收集破坏时,它们会自动清理。 3) 当我只是写一个简单的测试组件时

但这不是我经常做的事情。如果有 任何 可能将我的组件添加到 DOM 或从 DOM 中删除,那么我认为它必须发生在 connectedCallback 和 disconnectedCallback`