javascript - 如何在纯 JavaScript 对象(非 DOM)上创建按键事件系统

Question

我希望我的 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 对象上的方法 即使我必须创建自己的事件，尽管我也不知道如何做到这一点。

Answer 1

简单地说，

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