Various Mouse Events

The onmousedown, onmouseup, and onclick events are all parts of a mouse-click.

First when a mouse-button is clicked, the onmousedown event is triggered, then, when the mouse-button is released, the onmouseup event is triggered, finally, when the mouse-click is completed, the onclick event is triggered.

Change an image when a user holds down the mouse button.

Click mouse and hold down!

Change the background-color of an input field when it gets focus.

When the input field gets focus, a function is triggered which changes the background-color.

Change the color of an element when the cursor moves over it.

Mouse over this text

Change an input field

Change element in the input field to all caps when user leaves the input field.

When you leave the input field, a function is triggered which transforms the input text to upper case when user clicks outside of field.