【问题标题】:How to do a Keypress event system on pure JavaScript objects (non DOM)如何在纯 JavaScript 对象(非 DOM)上执行 Keypress 事件系统
【发布时间】:2017-11-10 04:29:28
【问题描述】:

我希望我的 JavaScript 对象实例能够处理它们自己的事件。所以我把它组织成这样。

class Player{
constructor(length=2)
{   
    this.length=length;
    this.plHead = new PlayerHead(5,5,"#AA0000");
    this.plBody = new PlayerBody(this.plHead.posX,this.plHead.posY, this.length);
    this.plDir = "xAx";
    this.plSpeed =0.25;
    this.addEventListener("keydown",this.KeyPush);
}

//TEMPDATA JUST TO TEST IF THE IDEAR WORKS
PlMove(dir=0)
{
    switch(dir)
    {
        case 0:
            this.plHead.posX = this.plHead.posX +this.plSpeed;
        break;
        case 1:
            this.plHead.posY = this.plHead.posY -this.plSpeed;
        break;
        case 2:
            this.plHead.posX = this.plHead.posX -this.plSpeed;
        break;
        case 3:
            this.plHead.posY = this.plHead.posY +this.plSpeed;
        break;
    }
}


//Player keypress 
KeyPush(evt)
{       
    switch(evt.keyCode)
    {                                       
        case 37:
            this.PlMove(2);
        break;
        case 38:
            document.getElementById("scoreDiv").innerHTML = this.title;
        break;
        case 39:
            this.PlMove(0);
        break;
        case 40:
            this.PlMove(3);
        break;
    }
}
}

但是我收到错误说 this.PlMove 不是一个函数。 然后经过进一步的研究,我发现这个。指的是 DOM 文档而不是 JavaScript 类对象,即使它在类内部。

所以现在我正在尝试寻找一种将事件列表器放在纯 JavaScript 对象而不是 DOM 对象上的方法 即使我必须创建自己的事件,尽管我也不知道该怎么做。

【问题讨论】:

标签: javascript class events keypress


【解决方案1】:

简单地说,

document.addEventListener("keypress", function(event){
    console.log(event);
    var keyName = event.key;
});

【讨论】:

  • 这种类型的键事件是一个 DOM 键事件,它只适用于 DOM 元素(文档、HTML 标签等)我想将事件列表器应用于 JavaScript 对象(javer 脚本类)而不是 DOM 元素。
  • 不是 Dom 元素?那么上下文呢?
  • 我说“我正在尝试寻找一种方法将事件列表器放在纯 JavaScript 对象而不是 DOM 对象上”所以在我上面的代码的上下文中,它将是名为的类对象播放器。这是一个自定义 javascript 对象,而不是 dom 对象。
猜你喜欢
  • 1970-01-01
  • 2019-05-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-05-22
  • 2013-11-21
相关资源
最近更新 更多