Web 组件的 disconnectedCallback 移除事件监听器的原因

Question

我在网上看到一个删除 Web 组件 dom 中按钮事件侦听器的示例 disconnectedCallback:

class MyComponent extends HTMLElement {
    constructor() {
        this.attachShadow({ mode: "open" });
        this.shadowRoot.innerHTML = "<button>Click</button>";
    }

    myEvent() {
        ...
    }

    connectedCallback() {
        this.shadowRoot.querySelector("button").addEventListener("click", this.myEvent.bind(this));
    }

    // Removes event here:
    disconnectedCallback() {
        this.shadowRoot.querySelector("button").removeEventListener("click", this.myEvent.bind(this));
    }
}

这样做有什么理由吗？由于按钮不在 dom 范围内，因此不会触发它的问题？是否存在内存泄漏问题？它未在 events section of web components best practises 中列出。我可以理解 window 等是否是事件侦听器，但不理解如果事件是由未连接的东西触发的效果

Answer 1

您可以随时重新连接元素，这样您将附加两次事件；

const elem = document.createElement('my-component');

document.body.appendChild(elem);

document.body.removeChild(elem);
document.body.appendChild(elem);

如果您的活动正在进行 API 调用，这将导致重复请求

Web 组件的 disconnectedCallback 移除事件监听器的原因

Reason for removing event listener on disconnectedCallback of web component

web-component