HTML Event Attributes
HTML event attributes allow you to define JavaScript code to be executed in response to specific user actions or browser events directly within HTML elements. These attributes are embedded within HTML tags and trigger JavaScript functions or expressions when the associated event occurs.
Common HTML Event Attributes
Here’s a list of some common HTML event attributes and their usage:
onclick
- Triggered when an element is clicked.
- Example:
<button onclick="alert('Button clicked!')">Click Me</button>
onmouseover
- Triggered when the mouse pointer hovers over an element.
- Example:
<div onmouseover="this.style.backgroundColor='yellow'">Hover over me</div>
onmouseout
- Triggered when the mouse pointer leaves an element.
- Example:
<div onmouseout="this.style.backgroundColor='white'">Move out of me</div>
onchange
- Triggered when the value of an input element changes (e.g., a text field or dropdown).
- Example:
<input type="text" onchange="console.log('Value changed!')">
onfocus
- Triggered when an element gains focus (e.g., when a user clicks into an input field).
- Example:
<input type="text" onfocus="this.style.backgroundColor='lightblue'">
onblur
- Triggered when an element loses focus.
- Example:
<input type="text" onblur="this.style.backgroundColor='white'">
onsubmit
- Triggered when a form is submitted.
- Example:
<form onsubmit="alert('Form submitted!'); return false;"> <input type="text" name="name"> <input type="submit" value="Submit"> </form>
onload
- Triggered when an element (such as an image) finishes loading.
- Example:
<img src="example.jpg" onload="console.log('Image loaded!')">
onunload
- Triggered when a user leaves the page or navigates away.
- Example:
<script> window.onunload = function() { alert('You are leaving the page!'); }; </script>
onkeydown
- Triggered when a key is pressed down.
- Example:
<input type="text" onkeydown="console.log('Key pressed!')">
onkeyup
- Triggered when a key is released.
- Example:
<input type="text" onkeyup="console.log('Key released!')">
onkeypress
- Triggered when a key is pressed and released (deprecated in favor of
onkeydown
andonkeyup
). - Example:
<input type="text" onkeypress="console.log('Key pressed and released!')">
- Triggered when a key is pressed and released (deprecated in favor of
Practical Example
Here’s an example combining several event attributes to show how they work together:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Attributes Example</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<button onclick="alert('Button clicked!')">Click Me</button>
<div
onmouseover="this.classList.add('highlight')"
onmouseout="this.classList.remove('highlight')"
>
Hover over me
</div>
<form onsubmit="alert('Form submitted!'); return false;">
<input type="text" onchange="console.log('Value changed!')" placeholder="Type something">
<input type="submit" value="Submit">
</form>
</body>
</html>