Drafting in the DOM: understanding DOM listeners.

Jonathan Villanueva
2 min readMay 23, 2021

So in the original assignment for this, I had made a few mistakes not knowing what I did wrong. I spent hours and days trying to wrap my head around what the DOM listeners were listening to.

For context, DOM event listeners are event handlers that attach themselves to an element. Here what I am trying to do is make a small cube block move left and right for a game. The UX here is trying to allow the user to press left and right within certain parameters.

However, I made a small error earlier. The arrow key had to be pressed continuously in order for the rock slider to move. What happened was the event listeners were looking for commands that only required the keydown feature, NOT keyup.

The error created a false statement that stopped the block from going forward and made the user to continuously press down on the right arrow key. My bad! Now, instead of having to continuously click the right arrow key, I can press it down and it can move all on its own!

relevant links:

--

--