事件处理函数在原型的方法中，为什么它认为.keyCode是JavaScript中的未定义的属性？ [英] Event Handler function in prototype's method, why does it think .keyCode is a property of undefined in JavaScript?

问题描述

我正在尝试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; 
} 
  

解决方案

在 addEventListener 调用中调用您的方法（未定义事件

addEventListener（keyup，me.move（event））;

应为

addEventListener（keyup，me.move） code>





可存取您此 函数aswell：

addEventListener（keyup，KeyBlock.prototype.move.bind（me））;

I am experimenting with DOM event handlers, and I put in my Constructor's prototype a function that works on the DOM div element, which is a property created by the constructor in my object. It displays the object correctly, but the only thing that does not work is that it thinks that in my method, .keyCode, is a property of undefined and gives me an error message:

TypeError: Cannot read property 'keyCode' of undefined (line 16 in function KeyBlock.move)

This is my method, along with my calling of it:

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

It might have to do with the argument, event, in the method? To answer this question, my constructor itself will not be needed, but I will also place it (below this text), to make clear what I am doing.

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

解决方案

you're calling your method(with a not defined event argument) in your addEventListener call instead of passing it.

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

should be

addEventListener("keyup", me.move);

to have access to your this property you need to bind the function aswell:

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

这篇关于事件处理函数在原型的方法中，为什么它认为.keyCode是JavaScript中的未定义的属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！