HTML DOM Events
HTML DOM allows JavaScript to react to HTML events.
React to events
JavaScript can be executed when an event occurs, such as when a user clicks on an HTML element.
To execute code when the user clicks an element, add the JavaScript code to the HTML event attribute:
onclick=JavaScript
Example of HTML event:
when the user clicks the mouse
when the page is loaded
when the image 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, the content of the <h1> element changes when the user clicks:
Example
<h1 onclick="this.innerHTML='Ooops!'">Click on the text!</h1>
In this example, the function is called from the event handler:
Example
<script>
function changetext(id){
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on the text!</h1>HTML event attributes
To assign events to HTML elements, you can use the event attribute.
Example
Assign an onclick event to the button element:
<button onclick="displayDate()">Click me</button>
In the above example, when the button is clicked, a function called displayDate is executed.
Use the HTML DOM to dispatch events
The HTML DOM allows you to assign events to HTML elements using JavaScript:
Example
Assign the onclick event to the button element:
document.getElementById("myBtn").onclick=function(){ displayDate() };In the above example, the function named displayDate is assigned to the HTML element with id=myButn".
When the button is clicked, the function will be executed.
onload and onunload events
The onload and onunload events are fired when the user enters or leaves the page.
The onload event can be used to check the visitor's browser type and version so that different versions of the web page can be loaded based on this information.
The onload and onunload events can be used to handle cookies.
Example
<body onload="checkCookies()">
onchange event
The onchange event is 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 content of the input field.
Example
<input type="text" id="fname" onchange="upperCase()">
onmouseover and onmouseout events
The onmouseover and onmouseout events can be used to trigger functions when the mouse pointer moves over or leaves an element.
Example
A simple onmouseover-onmouseout example:
onmousedown, onmouseup, and onclick events
The 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 completed, the onclick event is triggered.
Example
A simple onmousedown-onmouseup example:
HTML DOM Event Object Reference Manual
For a full description and examples of each event, visit our HTML DOM Reference Manual .