原型方法中的事件处理函数，为什么它认为.keyCode是JavaScript中未定义的属性？

Question

我正在尝试使用 DOM 事件处理程序，并且我在构造函数的原型中放入了一个适用于 DOM div 元素的函数，该元素是构造函数在我的对象中创建的属性。它正确显示对象，但唯一不起作用的是它认为在我的方法.keyCode 中是未定义的属性并给我一条错误消息：

TypeError：无法读取未定义的属性“keyCode”（函数 KeyBlock.move 中的第 16 行）

这是我的方法，以及我对它的调用：

  KeyBlock.prototype.move = function(event) {
  if(event.keyCode == 37)
    this.x -= 1;
  if(event.keyCode == 38)
    this.y -= 1;
  if(event.keyCode == 39)
    this.x += 1;
  if(event.keyCode == 40)
    this.y += 1;
  if (this.y < 0)
    this.y = 0;
  if (this.x < 0)
    this.x = 0;
  console.log(this.y);
}
me = new KeyBlock("me");
addEventListener("keyup", me.move(event));

可能与方法中的参数event 有关？要回答这个问题，不需要我的构造函数本身，但我也会将它放在（在此文本下方），以明确我在做什么。

  var KeyBlock = function(name) {
  this.character = document.createElement("div");
  document.body.appendChild(this.character);
  this.character.style.width = "20px";
  this.character.style.height = "20px";
  this.name = name;
  this.x = 0;
  this.y = 0;
  this.character.style.background = "indigo";
  this.character.id = this.name;
  this.character.style.left = String(this.x) + "px";
  this.character.style.top = String(this.y) + "px";
}

Answer 1

您在addEventListener 调用中调用您的方法（带有未定义的event 参数），而不是传递它。

addEventListener("keyup", me.move(event));

应该是

addEventListener("keyup", me.move);

要访问您的 this 属性，您还需要 bind 函数：

addEventListener("keyup", KeyBlock.prototype.move.bind(me));