如何在 connectCallback 中添加事件监听器答案

【问题标题】：how to add an event listener in connectCallback如何在 connectCallback 中添加事件监听器
【发布时间】：2022-10-25 16:20:11
【问题描述】：

我想等到元素在 dom 中呈现后才能调度事件。我有一个包裹在反应元素周围的发光元素。

在 connectedCallback 我有以下

connectedCallback() {
    super.connectedCallback();
    CommentsManager.register(this);

    const event = new Event('ccx-comments-loaded');
    window.dispatchEvent(event);
}

在构造函数中，我有以下内容

this.isReadyPromise = new Promise(function(resolve, reject) {
    window.addEventListener('ccx-comments-loaded', () => {
        resolve(true);
    });
});

如何删除我创建的侦听器？

【问题讨论】：

我有点不清楚确切的问题是什么。可以使用addEventListener 在connectedCallback 中添加一个事件监听器。在构造函数代码中，您可以通过传递带有once: true 的选项对象来清理ccx-comments-loaded 事件处理程序。 updateComplete documentation 中介绍了在调度事件之前等待渲染完成的问题。

标签： lit-element lit

【解决方案1】：

存储对事件侦听器的引用，然后在 disconnectedCallback 中删除它

customElements.define("my-element", class extends HTMLElement {
  constructor() {
    super();
    this.listener = window.addEventListener("click", () => {
      this.remove();
    });
  }
  connectedCallback() {
    this.innerHTML = `Listening! Click to remove Web Component`;
  }
  disconnectedCallback() {
    // element is no longer in the DOM; 'this' scope still available!!!
    window.removeEventListener("click", this.listener);
    document.body.append("Removed Web Component and Listener");
  }
})

&lt;my-element&gt;&lt;/my-element&gt;

【讨论】：

【解决方案2】：

我想等到元素在 dom 中呈现后才能调度事件。

看起来您可以使用 lit-element 生命周期中已经存在的 updateComplete 方法。它在render 之后执行，听起来您可能想要使用它而不是拥有自己的事件。你可以在这里阅读更多关于它的信息： https://lit.dev/docs/v1/components/lifecycle/#updatecomplete

这将是使用lit-element 的一种干净且更直接的方式。这样您就不会重新发明现有的东西，并且您的代码对于其他开发人员来说会更加直接和清晰。

【讨论】：