The onload and onunload Events

The onload and onunload events are triggered when a user enters or leaves a page.

The onload event can be used to detect the visitor’s browser type and version, allowing you to load the appropriate version of the web page.

Both the onload and onunload events can also be used to manage cookies.

Example

The oninput Event

The oninput event is commonly used to trigger an action as the user enters data.

Below is an example of using oninput to change the content of an input field.

Example

The onchange Event

The onchange event is commonly used in conjunction with input field validation.

Below is an example of how to use onchange. The upperCase() function will be triggered when a user modifies the content of an input field.

Example

The onmouseover and onmouseout Events

The onmouseover and onmouseout events can be used to trigger a function when the user hovers over or moves the mouse away from an HTML element.

The onmousedown, onmouseup and onclick Events

The onmousedown, onmouseup, and onclick events together create a sequence for a mouse click. The onmousedown event is triggered when the mouse button is pressed, followed by the onmouseup event when the button is released, and the onclick event is fired once the click is completed.

More Examples

onmousedown and onmouseup:

Change an image when the user holds down or releases the mouse button.

onload:

Display an alert box once the page has finished loading.

onfocus:

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

Mouse Events: Change the color of an element when the mouse cursor hovers over it.