Other popular types of events are keyboard events! keyboard events are triggered by user interaction with keyboard keys in the browser.
The keydown event is fired while a user presses a key down.
The keyup event is fired while a user releases a key.
The keypress event is fired when a user presses a key down and releases it. This is different from using keydown and keyup events together, because those are two complete events and keypress is one complete event.
Keyboard events have unique properties assigned to their event objects like the .key property that stores the values of the key pressed by the user. You can program the event handler function to react to a specific key, or react to any interaction with the keyboard.
Instructions
Now it’s time to create a game! Program this code to dribble the ball on the platform using any key on a keyboard. When a user presses a key down, it should lift the ball up. When the user releases the key, the ball should drop.
First, make a function named up() that will raise the .bottom position of the ball to '250px'.
Next, make a function named down() that will lower the .bottom position of the ball to '50px'.
Create an event handler property that runs the up() function when a keydown event fires on the document object, or anywhere on the DOM, as the event target.
Create an event handler property that runs the down() function when a keyup event fires on the document.
Run your code and play around with the keyboard events to make the ball bounce on the platform. You can try keys like the space bar, letter keys, or number keys!
Sign up to start coding
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.