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

Event Handler function in prototype's method, why does it think .keyCode is a property of undefined in JavaScript?

本文关键字：keyCode 未定义 属性 JavaScript 为什么 事件处理 方法 程序 函数 原型      更新时间：2023-09-26

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

类型错误：无法读取未定义的属性"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";
}

你在addEventListener调用中调用你的方法（使用未定义的event参数）而不是传递它。

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

应该是

addEventListener("keyup", me.move);

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

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

相关文章：