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

Polymer 2.0:事件监听器添加事件监听器的理想位置在哪里?,polymer,polymer-2.x,Polymer,Polymer 2.x,我见过有人在“ready”函数中添加事件监听器,在“connectedCallback”函数中添加其他监听器。我的问题是,每个地方的优点和缺点是什么?在连接上,我们负责将其移除;在ready中,它将停留在那里,我不确定这是否是一个问题 我应该这样做吗: connectedCallback() { super.connectedCallback(); this.addEventListener('click', this.myFunction.bind(this)); } dis

我见过有人在“ready”函数中添加事件监听器,在“connectedCallback”函数中添加其他监听器。我的问题是,每个地方的优点和缺点是什么?在连接上,我们负责将其移除;在ready中,它将停留在那里,我不确定这是否是一个问题

我应该这样做吗:

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));
}
或此:

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));
}

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

  • 元素注册了它的影子DOM
  • 已分发任何
然后,post
ready
attached
被触发

因此,您可能已经使用了
ready
作为一次回调,在一切都确实ready

随着Polymer 2.0的推出,合同中的回调方式发生了变化,以及

  • 新的
    分发后,不再保证执行
    ready
    回调。这意味着,不能保证ready本身会等待content/light DOM分发

  • attached
    现在是新的
    connectedCallback
    ,对于元素级DOM操作(如设置属性、附加子项等)非常有用。这是一个生命周期更改,发生在插槽节点分布之后,并且元素本身附加到DOM层次结构中,但是不一定是在油漆之后

因此,对于任何不依赖任何
:slotted
内容的事件,请使用
ready
回调

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

但是,如果可能,在元素的回调中使用super类
Polymer
afterNextRender
方法来添加事件侦听器

这些是我可能想到的

所有这些,还有更多,如果有帮助的话

我还没有读到我们必须从生命周期回调中删除事件侦听器之类的内容

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

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

就像在
自定义元素
就绪
连接的回调
中的
窗口
上附加事件侦听器一样


只有在这种情况下,polymer才建议您删除
断开连接上的事件侦听器。现在,我还要检查about AfertnextTrenderYeah。我自己也没用过,但一定是为了防止渲染块,请检查一下,干杯@在大多数情况下,分配事件侦听器的最佳时间越早越好。我通常使用构造函数并在其中定义我的事件侦听器。