Exhibit #0: Handling Keyboard Event

What are We Doing?

• When the browser is in focus and you do something with the keyboard, the browser generates an event that can be processed by your code.
• We are mainly interested in two types of events:
  • keydown is generated when you press a key on the keyboard.
  • keyup is generated when you release a pressed key.
• We use jQuery to assign event handlers to these events:
  • $(document).keydown(<handler>)
  • $(document).keyup(<handler>)
  The assign handlers will respond to all keyboard events in the page. It is also possible to assign handlers to specific elements, but should not be necessary for our purposes.
• A keyboard event handler is a function with one argument, which is the KeyboardEvent object.
• You can see the full documentation of KeyboardEvent here.
• Here are some useful fields of KeyboardEvent

  Name	Type	Meaning
  key	String	The string representing the key value of the key pressed. For examples, 'a', 'b', 'Alt', 'ArrowLeft', etc.
  ctrlKey	Boolean	Whether the Ctrl key is pressed when the event was fired.
  altKey	Boolean	Whether the Alt key is pressed when the event was fired.
  shiftKey	Boolean	Whether the Shift key is pressed when the event was fired.
  metaKey	Boolean	Whether the Meta key (Mac) is pressed when the event was fired.

Demo

Press a key and I'll tell you what's going on.