JS 中的调用方法 class returns “...不是函数”

Question

我有 JS class 有这样的方法：

  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");
  }

我的问题是：为什么直接调用 "click" eventListener 有效（它记录消息），以及 this._onSend() 方法，在 _onKeyPress returns [=16= 中调用].

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

这是与 eventListeners 相关的某种魔法吗？

Answer 1

当函数用作事件处理程序时，它的 this 被设置为事件从 this - JavaScript | MDN 触发的元素。所以你不能期望你的方法在那里，但你可以使用 Function.prototype.bind().

将你的 this 绑定到你的函数

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

JS 中的调用方法 class returns “...不是函数”

Calling method in JS class returns "...is not a function"

javascript

keydown

addeventlistener