HTML DOM allows JavaScript to react to HTML events.
JavaScript can be executed when an event occurs, like 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=JavaScriptExamples 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 strokes a key
In this example, the content of the <h3> element is changed when a user clicks on it:
<!DOCTYPE html>
<html>
<body>
<h3 onclick="this.innerHTML='Ooops!'">Click on this text!</h3>
</body>
</html>Output:
Click on this text!
HTML Event Attributes
To assign events to HTML elements you can use event attributes.
Assign an onclick event to a button element:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById("ex-1").innerHTML = Date();
}
</script>
<p id="ex-1"></p>
</body>
</html> Output:
Click the button to display the date.
Assign Events Using the HTML DOM
The HTML DOM allows you to assign events to HTML elements using JavaScript:
<!DOCTYPE html>
<html>
<body>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="button">Try it</button>
<p id="ex-2"></p>
<script>
document.getElementById("button").onclick = displayDate;
function displayDate() {
document.getElementById("ex-2").innerHTML = Date();
}
</script>
</body>
</html>
Output:
Click “Try it” to execute the displayDate() function.
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 check 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 deal with cookies.
<!DOCTYPE html>
<html>
<body onload="checkCookies()">
<p id="ex-3"></p>
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies are enabled.";
} else {
text = "Cookies are not enabled.";
}
document.getElementById("ex-3").innerHTML = text;
}
</script>
</body>
</html>
Output:
The onchange Event
The onchange event is often used in combination with the validation of input fields.
Below is an example of how to use the onchange. The upperCase() function will be called when a user changes the content of an input field.
<!DOCTYPE html>
<html>
<head>
<script>
function onChange() {
var x = document.getElementById("first-name");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
Enter your name: <input type="text" id="first-name" onchange="onChange()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
</body>
</html>Output:
When you leave the input field, a function is triggered which transforms the input text to upper case.
The onmouseover and onmouseout Events
The onmouseover and onmouseout events can be used to trigger a function when the user mouses over, or out of, an HTML element:
<!DOCTYPE html>
<html>
<body>
<div onmouseover="moveOver(this)" onmouseout="mOut(this)"
style="background-color:#2a9d8f;width:200px;height:40px;padding:30px;font-size:20px">
Mouse Over Me</div>
<script>
function moveOver(obj) {
obj.innerHTML = "Thank You"
}
function moveOut(obj) {
obj.innerHTML = "Mouse Over Me"
}
</script>
</body>
</html> Output:
The onmousedown, onmouseup and onclick Events
<!DOCTYPE html>
<html>
<body>
<div onmousedown="mouseDown(this)" onmouseup="mouseUp(this)"
style="background-color:yellow;width:200px;height:20px;padding:40px;">
Click Me</div>
<script>
function mouseDown(obj) {
obj.style.backgroundColor = "#f4a261";
obj.innerHTML = "Release Me";
}
function mouseUp(obj) {
obj.style.backgroundColor="#e76f51";
obj.innerHTML="Thank You";
}
</script>
</body>
</html>
Output:
Enjoy coding!
Read also: