HTML DOM event

HTML DOM - Event

HTML DOM allows JavaScript to react to HTML events.

React to events

JavaScript can be performed when an event occurs, such as when a user clicks on an HTML element.

If you need to execute code when a user clicks on an element, add JavaScript code to the HTML event properties:

Examples of HTML events:

• When the user clicks the mouse
• When the page is loaded
• When the picture is loaded
• When the mouse moves over the element
• When the input field is changed
• When the HTML form is submitted
• When the user triggers a key

In this example, when the user clicks, the contents of the element are changed:

In this case, the function is called from the event handler:

HTML event properties

If you need to assign events to HTML elements, you can use event properties.

In the example above, when you click the button, a function called displayDate is executed.

Use HTML DOM to assign events

HTML DOM allows you to assign events to HTML elements using JavaScript:

In the example above, a function named displayDate is assigned to an HTML element of id=myButn".

When the button is clicked, the function is executed.

onload and onunload events

Onload and onunload events are triggered when a user enters or leaves the page.

The onload event can be used to check the browser type and version of the visitor so that different versions of the page can be loaded based on this information.

Onload and onunload events can be used to process cookies.

Onchange event

Onchange events are often used for validation of input fields.

The following example shows how to use onchange. The upperCase() function is called when the user changes the contents of the input field.

onmouseover and onmouseout events

Onmouseover and onmouseout events can be used to trigger functions when the mouse pointer moves to or away from an element.

onmousedown, onmouseup, and onclick events

Onmousedown, onmouseup, and onclick events are all mouse clicks. First, when a mouse button is clicked, the onmousedown event is triggered, then when the mouse button is released, the onmouseup event is triggered, and finally, when the mouse click is complete, the onclick event is triggered.

HTML DOM event object reference manual

If you need a complete description and example of each event, visit our HTML DOM reference manual.