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

Question

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

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 引用，您可以将回调与所需的对象绑定。

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

请注意，bind returns 一个新函数，如果需要删除事件侦听器，那么您可能希望将绑定函数存储在 class变量（可能在构造函数中）并使用 class 属性添加和删除事件侦听器。

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

Custom Element class with a reusable event handler method

javascript

closures

custom-element