* * *
HTML DOM allows JavaScript to react to HTML events.
## Example
Mouse Over Me
Click Me
* * *
## Reacting to Events
When an event occurs, you can execute JavaScript, for example, when a user clicks on an HTML element.
To execute code when a user clicks on an element, add the JavaScript code to the HTML event attribute:
onclick=_JavaScript_
Examples of HTML events:
* When the user clicks the mouse
* When the webpage has loaded
* When an image has loaded
* When the mouse moves over an element
* When an input field changes
* When an HTML form is submitted
* When a key is pressed by the user
In this example, the content of the
element changes when the user clicks:
## Example
Click text!
[Try it Yourself »](#)
In this example, a function is called from the event handler:
## Example
function changetext(id){ id.innerHTML="Ooops!"; }
Click text!
[Try it Yourself »](#)
* * *
## HTML Event Attributes
To assign an event to an HTML element, you can use event attributes.
## Example
Assign an onclick event to a button element:
[Try it Yourself »](#)
In the example above, when the button is clicked, the function named displayDate() is executed.
* * *
## Assigning Events Using HTML DOM
HTML DOM allows you to use JavaScript to assign events to HTML elements:
## Example
Assign an onclick event to a button element:
document.getElementById("myBtn").onclick=function(){displayDate()};
[Try it Yourself »](#)
In the example above, the function named displayDate() is assigned to the HTML element with id="myBtn".
When the button is clicked, the function will be executed.
* * *
## onload and onunload Events
The onload and onunload events are triggered when the user enters or leaves a page.
The onload event can be used to check the visitor's browser type and version, so that different versions of the webpage can be loaded based on this information.
The onload and onunload events can be used to handle cookies.
## Example
[Try it Yourself »](#)
* * *
## onchange Event
The onchange event is commonly used for validating input fields.
The following example shows how to use onchange. When the user changes the content of the input field, the upperCase() function is called.
## Example
[Try it Yourself »](#)
* * *
## onmouseover and onmouseout Events
The onmouseover and onmouseout events can trigger functions when the mouse pointer moves over or leaves an element.
## Example
A simple onmouseover-onmouseout example:
Mouse Over Me
[Try it Yourself »](#)
* * *
## onmousedown, onmouseup, and onclick Events
The onmousedown, onmouseup, and onclick events represent the entire process of a mouse click. First, when a mouse button is pressed, 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.
## Example
A simple onmousedown-onmouseup example:
Click Me
[Try it Yourself »](#)
* * *
## HTML DOM Event Object Reference Manual
For a complete description and examples of each event, visit our (#).
YouTip