Use JavaScript event listeners to change the color of a square. Each event listener has a color associated with it. All the event listeners are triggered by having the mouse pointer in the square, except for scroll
event, which is triggered by scrolling outside of the square setting the square color to orange
mouseover
gives the square a background color of bluemouseout
will remove all background colors from the squaremousedown
changes the square color to redmouseup
changes the square color to yellowdblclick
changes the square color to green
Additionally, by pressing the following keys will set the color of the square:
-
b
- blue -
g
- green -
o
- orange -
r
- red -
y
- yellow