Explain the HTML Events.

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-