Javascript 使用ES6类方法处理DOM事件

我不完全确定StackOverflow是否是提出这个话题的正确地点，但如果我错了，我想我会被纠正的

---

我问自己，在原型链（或ES6“类”）中处理DOM事件处理程序的“更好的实践”是什么

如果绑定以下方法，则会出现问题：

node.addEventListener('click', this.clickHandler, false);

（下面是完整的示例）

当调用该方法时，您显然会丢失

这个
上下文。我们可以通过将上下文绑定到该方法（
this.clickHandler.bind（this）
）来解决这个问题。使用此技术的唯一问题是，
bind（）
当然会返回另一个函数引用。这反过来意味着，您不能通过调用

node.removeEventListener('click', this.clickHandler);

因为你处理的是不同的功能。到目前为止，我能想到的唯一方法是，在将绑定方法附加到事件之前创建该绑定方法，并将其存储在
此
上下文变量中：

this._boundClickHandler = this.clickHandler.bind( this );
node.addEventListener('click', this._boundClickHandler, false);

是的，这很管用，但看起来很难看，也不是很直观。ES6课程中是否有更好的模式来解决此类问题

ES6本身没有您想要的解决方案，但您可以使用ES7类属性：

class foo {
    constructor() {
        document.body.addEventListener('click', this.clickHandler, false );
    }

    clickHandler = event => {
        // do stuff
        document.body.removeEventListener('click', this.clickHandler);
    }
}

clickHandler是一个胖箭头函数，它将“this”上下文绑定到类实例，这正是您想要的
您还可以使用ES6和返回事件中提供的默认选项：


class-foo{
静态默认值（）{
返回{
活动：{
“单击.节点\标识符”：“节点单击”
}
};
}
nodeClick（e）{
//做事
}
}
“非常难看而且不太直观”——我对使用类语法的想法。很不错的。它还可以很好地与异步函数配合使用，只需使用
transform class properties
babel插件即可。
class foo {
    constructor() {
        document.body.addEventListener('click', this.clickHandler, false );
    }

    clickHandler = event => {
        // do stuff
        document.body.removeEventListener('click', this.clickHandler);
    }
}