javascript - 具有可重用事件处理程序方法的自定义元素类

Question

我有一个使用此自定义元素类的自定义按钮:

class Button extends HTMLElement {
    connectedCallback() {
        document.addEventListener('click', this.reusableClickHandler)
    }

    disconnectedCallback() {
        document.removeEventListener('click', this.reusableClickHandler)
    }

    reusableClickHandler() {
        console.log(this) // how to get `this` to equal the button instance
    }
}

自定义按钮监听 document 上的点击，并在从 DOM 中删除按钮时删除过时的事件处理程序。

我可以保留this吗？ reusableClickHandler()内等于按钮实例吗？不知道怎么写。

我也知道以这种方式创建的按钮不是最佳的，它只是为了演示问题。谢谢

Answer 1

要在回调中获取特定的 this 引用，您可以将回调与所需的对象绑定(bind)。

document.addEventListener('click', this.reusableClickHandler.bind(this));

顺便说一句，bind 返回一个新函数，如果需要删除事件监听器，那么您可能希望将绑定(bind)函数存储在类变量中(可能在构造函数中)并使用类属性添加和删除事件监听器。