DOM Events
JavaScript HTML DOM events
HTML DOM gives JavaScript the ability to react to HTML events.
React to events
We can execute JavaScript when an event occurs, such as when the user clicks on an HTML element.
To execute code when the user clicks on an element, add JavaScript code to an HTML event attribute:
onclick = JavaScript
Examples of HTML events:
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 submitting an HTML form
When the user triggers a key
In this example, when the user clicks on the <h1> element, it will change its content:
Example
<!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML='Ooops!'">Click on the text!</h1> </body> </html>
This example calls a function from the event handler:
Example
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on the text!</h1>
</body>
</html>HTML event attributes
To assign events to HTML elements, you can use event attributes.
Example
Assign the onclick event to the button element:
<button onclick =" displayDate() ">click here</button>
In the above example, the function named displayDate will be executed when the button is clicked.
Use HTML DOM to assign events
HTML DOM allows you to use JavaScript to assign events to HTML elements:
Example
Assign the onclick event to the button element:
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
In the above example, the function named displayDate is assigned to the HTML element with id="myBtn".
The Javascript function will be executed when the button is clicked.
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 correct version of the web page 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 in conjunction with the validation of input fields.
The following is an example of how to use onchange. When the user changes the content of the input field, the upperCase() function is called.
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 user's mouse moves over or out of an HTML element.
Example
A simple onmouseover-onmouseout example:
onmousedown, onmouseup, and onclick events
onmousedown, onmouseup and onclick constitute all parts of the mouse click event. First, when the mouse button is clicked, the onmousedown event is triggered, 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:
More examples
onmousedown and onmouseup
change an image when the user presses the mouse button.
onload
displays a prompt box when the page is finished loading.
onfocus
When the input field gets focus, change its background color.
Mouse events
When the pointer moves over the element, its color is changed; when the pointer moves out of the text, its color is changed again.