Polymer 2.0：事件监听器的理想添加位置在哪里？

Question

我看到有人在 "ready" 函数上添加事件侦听器，其他人在 "connectedCallback" 上添加。我的问题是，每个地方的优缺点是什么？在连接上，我们负责将其删除；准备好了，它会留在那里，我不确定它是否有问题。

我应该这样做吗:

connectedCallback() {
    super.connectedCallback();
    this.addEventListener('click', this.myFunction.bind(this));
}

disconnectedCallback() {
    super.disconnetedCallback();
    this.removeEventListener('click', this.myFunction);
}

或者这样：

ready() {
    super.ready();
    this.addEventListener('click', this.myFunction.bind(this));
}

Answer 1

直到 Polymer 1.x.whatever ，元素生命周期中的 ready 回调被调用一次

该元素注册了它的影子DOM
任何 <content> 已分发

然后，post ready , attached 被解雇了

所以，您可能已经使用 ready 作为一次性回调，在一切确实 准备好 [=77=]

之后
从 Polymer 2.0 开始，合同回调的触发方式发生了变化，并且

ready 回调不再保证在新 <slots> 分发后执行意味着，无法保证 ready 本身会等待 content / light DOM分布.

attached 现在是新的 connectedCallback 并且对于元素级别 DOM 操作非常有用，例如设置属性、附加子项等。这是一个生命周期在分配插槽节点并且元素本身附加在 DOM 层次结构之后发生的更改，但 不一定 在绘制之后。

所以，对于不依赖任何 ::slotted 内容的任何事件，请使用 ready 回调

对于任何需要了解所有分发内容以及影子 DOM 的内容，请使用 connectedCallback

但是，如果可能，请使用超级 class Polymer 的 afterNextRender 方法，在元素的回调中添加事件侦听器

这些是我可能想到的。

所有这些以及更多，如果有帮助，here

我还没有读到我们必须从生命周期回调中删除事件侦听器，或类似的东西。

如果您指的是元素本身可能动态连接和断开连接/或在事物流中的情况，

考虑到这一点，您要在元素的生命周期回调中的全局/本机元素上添加事件侦听器，

比如在 custom-element 的 ready 或 connectedCallback、
中的 window 上附加一个事件侦听器
只有在这种情况下，polymer 才会建议您删除 disconnect
上的事件侦听器

Polymer 2.0：事件监听器的理想添加位置在哪里？

Polymer 2.0: Event listeners where is the ideal place to add it?

polymer

polymer-2.x