Mouse and keyboard

We used so far JavaScript events to handle the mouse click ("click") (as well as the right click ("contextmenu")), and change of inputs in contextual GUI ("input"). Various other events can be used to trigger actions on your program.

Keyboard

Create a program listening the following events: keydown, keypress, keyup. Print the triggered corresponding actions in command line. Observe the content of the event related to a keyboard event.

Mouse

Create a program listening to the mousemove event. Observe that the event if fired continuously when you move the mouse. To what corresponds the values event.clientX and event.clientY ?

Exercice

Create the following program such that

• - A disc follows the mouse displacement on the screen at all time (the disc is centered on the mouse pointer).
• - When pressing on enter key, the disc changes its color from red, to yellow, and green.

Hint:

• Translating an element can be performed using the translate property.