HTML Event Attributes

Common HTML events.

Examples

Onchange Event

Transforming input text to uppercase when it changes.

<!DOCTYPE html>
<html>
<body>
Enter your name: <input type="text" id="fname" onchange="upperCase()">
<script>
function upperCase() {
  const x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>
</body>
</html>

Mouse Over/Out

Changing background color on mouse interaction.

<div onmouseover="this.style.backgroundColor='red'" 
     onmouseout="this.style.backgroundColor='green'"
     style="width:100px;height:100px;background-color:green;">
     Hover Me!
</div>

Onload Event

Executing code when the page finishes loading.

<body onload="alert('Page returned!')">
<h1>Hello World!</h1>
</body>

Test Your Knowledge

JavaScript Quiz

No quiz available for this topic yet.