# JavaScript HTML DOM Events
* * *
HTML DOM enables JavaScript to react to HTML events.
## Example
Mouse Over Me
Click Me
* * *
## Reacting to Events
We can execute JavaScript when an event occurs, for example, when a user clicks on an HTML element.
To execute code when a user clicks on an element, add JavaScript code to an HTML event attribute:
onclick=_JavaScript_
Examples of HTML events:
* When a user clicks the mouse
* When a web page has loaded
* When an image has been loaded
* When the mouse moves over an element
* When an input field is changed
* When an HTML form is submitted
* When a user presses a key
In this example, when a user clicks on the
element, its content changes:
## Example
Click on this text!
[Try it Yourself »](#)
This example calls a function from an event handler:
## Example
function changetext(id)
{
id.innerHTML="Ooops!";
}
Click on this text!
[Try it Yourself »](#)
* * *
## HTML Event Attributes
To assign events to HTML elements, you can use event attributes.
## Example
Assign an onclick event to a button element:
[Try it Yourself »](#)
In the example above, the function named displayDate() will be executed when the button is clicked.
* * *
## Using the HTML DOM to Assign Events
The HTML DOM allows you to assign events to HTML elements using JavaScript:
## 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".
The JavaScript function will be executed when the button is clicked.
* * *
## The onload and onunload Events
The onload and onunload events are triggered when the user enters or leaves the page.
The onload event can be used to detect the visitor's browser type and browser version, and load the proper version of the web page based on the information.
The onload and onunload events can be used to handle cookies.
## Example
[Try it Yourself »](#)
* * *
## The onchange Event
The onchange event is often used in combination with input field validation.
The following is an example of how to use onchange. The upperCase() function will be called when the user changes the content of the input field.
## Example
[Try it Yourself »](#)
* * *
## The onmouseover and onmouseout Events
The onmouseover and onmouseout events can be used to trigger a function when the user's mouse moves over or out of an HTML element.
## Example
A simple o
YouTip