Question

我的JS类有这样的方法：

  setupComponent() {
    document.getElementById("message-input").addEventListener("keydown", this._onKeyPress);
    document.getElementById("send-button").addEventListener("click", this._onSend);
  }

在它下面，有两种方法：

  _onKeyPress(event) {
    if (event.code === "Enter") {
      this._onSend();
    }
  }

  _onSend() {  
     console.log("send");
  }

我的问题是：为何直接来自＆＃34;点击＆＃34; eventListener工作（它记录消息），this._onSend()中调用的_onKeyPress方法返回this._onSend is not a function。

在this._onSend()内使用setupComponent()也可以。

这是与eventListeners相关的某种神奇吗？

Answer 1

当一个函数用作事件处理程序时，它的设置为从this - JavaScript | MDN触发的事件的元素。所以你不能指望你的方法存在，但你可以使用Function.prototype.bind()将它绑定到你的函数。

document.getElementById("message-input")
      .addEventListener("keydown", this._onKeyPress.bind(this));

JS类中的调用方法返回＆＃34; ...不是函数＆＃34;

1 个答案: