Question

我不完全确定StackOverflow是否是提出此主题的正确位置，但我想如果我错了，我会得到纠正。

我问自己，什么是更好的做法＆＃34;处理原型链（或ES6＆＃34;类＆＃34;）中的 DOM事件处理程序。

如果绑定类似的方法会出现问题：

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

（以下完整示例）

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

来删除该处理程序

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

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

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

是的，这可以完成这项工作，但它看起来非常难看而且不太直观。是否有更好的模式来解决 ES6类中的这类问题？

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

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

Answer 1

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

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

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

clickHandler，作为一个胖箭头函数，将“this”上下文绑定到类实例，这正是你想要的

Answer 2

您还可以使用ES6中提供的默认选项并返回事件：

class foo {
  static defaults() {
    return {
      events: {
        "click .node_identifier": "nodeClick"
      }
    };
  }
  
  nodeClick(e) {
    //Do stuff
  }
}

使用ES6类方法处理DOM事件

2 个答案: