HTML DOM event
HTML DOM allows JavaScript events to react to HTML.
Examples
React to events
When an event occurs, you can execute JavaScript, such as 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 attributes:
HTML Event examples:
- 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 the key
In this example, when a user clicks on, it will change the content of <h1> element:
Examples
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
try it"
In this case, the function will be called from the event handler:
Examples
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>
try it"
HTML Event Attributes
To assign events to HTML elements, you can use the event attributes.
Examples
Assigned to the button element an onclick event:
try it"
In the above example, when the button is clicked, it performs the function named displayDate.
Use the HTML DOM to assign an event
HTML DOM event allows you to use JavaScript to assign HTML elements:
Examples
Assigned onclick event button element:
document.getElementById("myBtn"). onclick =function(){ displayDate() };
</script>
try it"
In the above example, the function named displayDate are assigned to the id = myButn "HTML element.
When the button is clicked, the function execution.
onload and onunload event
When a user enters or leaves the page, it will trigger onload and onunload event.
onload event can be used to check visitors browser type and version in order based on the information to load different versions of a page.
onload and onunload event for handling cookies.
onchange event
onchange event is often used to validate the input field.
The following example shows how to use onchange. When the user changes the contents of the input field will be called upperCase () function.
onmouseover and onmouseout events
onmouseover and onmouseout events can be used to trigger functions when the mouse pointer moves into or out of the elements.
onmousedown, onmouseup and onclick event
onmousedown, onmouseup onclick event is a mouse click and the whole process. First, when a mouse button is clicked, trigger onmousedown event, and then, when the mouse button is released, it will trigger onmouseup event, and finally, when the mouse click Finish, the onclick event is triggered.
HTML DOM Event Object Reference
For a full description and examples of each event, please visit our HTML DOM reference manual .