HTML Events
HTML events are actions or events that occur in interaction with a web page. This information can take various forms such as user actions, browser actions, or external events. HTML events are often used to trigger JavaScript functions, resulting in dynamic actions and interactions in web pages.
Types of HTML Events
Here are some common types of HTML events given below,
onclick
This event occurs when a user clicks on an HTML elements.
Syntax-
<button onclick="myFunction()">Click Here</button>
onmouseover/onmouseout
Occurs when the mouse pointer moves to/from an element.
Syntax-
<img src="image.jpg" onmouseover="showDetails()" onmouseout="hideDetails()">
onkeydown/onkeyup/onkeypress
When a keyboard key is pressed/released/pressed and released when attention is on an element.
Syntax-
<input type="text" onkeydown="myFunction(event)">
onload
Occurs when an object is loaded (e.g., a page, image, or external file).
Syntax-
<body onload="loadFunction()">
onsubmit
Occurs when the form is submitted.
Syntax-
<form onsubmit="return validateForm()">
onchange
Occurs when the value of an element changes (works with input fields, works with selected elements, etc.).
Syntax-
<input type="text" onchange="updateValue()">
onfocus/onblur
Occurs when an element gains/loses focus.
Syntax-
<input type="text" onfocus="highlight()" onblur="removeHighlight()">
These events can be handled inline (directly in an HTML element) or using event listeners in JavaScript. Event listeners offer greater flexibility and are often preferred for handling events in modern web development. Additionally, HTML events can bubble or eclipse, affecting how events are handled when multiple objects are nested within each other.
Example-
Here is a basic example to demonstrate the use of HTML events,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Events Example</title>
<style>
/* Styling for center all the html elements */
.html-events{
text-align: center;
}
</style>
</head>
<body>
<div class="html-events">
<!-- HTML Button with onclick event -->
<button onclick="greet()">Click Here</button>
<br><br>
<!-- HTML Input field with onchange event -->
<label for="myInput">Type something:</label>
<input type="text" id="myInput" onchange="showValue()">
<!-- HTML paragraph with onmouseover and onmouseout events -->
<p id="mouse-over" onmouseover="showDetails()" onmouseout="hideDetails()">Mouse Pointer Over Me</p> </div> <script> // JavaScript function to handle the onclick event function greet() { alert('You clicked me!'); } // JavaScript function to handle the onchange event function showValue() { var inputElement = document.getElementById('myInput'); alert('You typed: ' + inputElement.value); } // JavaScript function to handle the mouse over event function showDetails(){ // add backgound color when mouse over document.getElementById("mouse-over").style.backgroundColor = "yellow"; } // JavaScript function to handle the mouse out event function hideDetails(){ // remove the backgournd color when mouse out document.getElementById("mouse-over").style.backgroundColor = ""; } </script> </body> </html>
Output-
![Explain the HTML Events.](/Images/mindstick-loader-image.png)
Also, Read: Creating responsive drop-down in HTML
Leave Comment