How to do a Keypress event system on pure JavaScript objects (non DOM)

Question

I am wanting my JavaScript object instances to handle their own events. so I have structured it like this.

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

however i was getting errors saying that this.PlMove is not a function. Then after further research i found out that the this. was referring to the DOM Document not the JavaScript class object even though it is inside the class.

So now I am trying to look for a way to put event listers on to an pure JavaScript object Not an DOM object even if i have to create my own events all though I have no clue how to do that either.

`addEventListener` is intended for DOM objects. If you want to deal with events on Plain objects you should consider other eventing mechanisms like https://www.npmjs.com/package/event-emitter. And this question could be a duplicate of https://stackoverflow.com/questions/20835768/addeventlistener-on-custom-object — Nandu Kalidindi, Nov 10 '17 at 05:05
the link you gave me uses npm. will the code run on computers with out node.js? — skyline, Nov 10 '17 at 10:34

pirs · Answer 1 · 2019-06-29T14:28:53.623

2

Simply,

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

edited Jun 29 '19 at 14:28

answered Nov 10 '17 at 04:35

pirs

2,410
2
18
25

That type of key event is a DOM key event witch only works on DOM elements (document, HTML tags, ect) I want to apply event listers to JavaScript objects (javer script classes) Not DOM elements. – skyline Nov 10 '17 at 10:23
Not Dom element ? wich context so ? – pirs Nov 10 '17 at 14:17
I said " I am trying to look for a way to put event listers on to an pure JavaScript object Not an DOM object" So as in the context of my code above it would be the class object called player. which is a custom javascript object, not a dom object. – skyline Nov 12 '17 at 22:10
Like this ? https://stackoverflow.com/questions/15308371/custom-events-model-without-using-dom-events-in-javascript – pirs Nov 13 '17 at 02:42

How to do a Keypress event system on pure JavaScript objects (non DOM)

1 Answers1