HTML event attributes are used to define actions that should occur when specific events are triggered on a webpage.
- They enable interaction between the user and the system, like clicking a button or resizing a window.
- Event attributes are added to HTML elements to specify the event type and action.
- They enhance dynamic behavior and improve user experience on a webpage.
<html>
<head>
<script>
function displayMessage() {
alert("Button was clicked!");
}
</script>
</head>
<body>
<button onclick="displayMessage()">Click Me!</button>
</body>
</html>
- <button onclick="displayMessage()">: Calls a function when the button is clicked.
- displayMessage(): Shows an alert message when triggered.
Window Event Attributes
Window Event Attributes are HTML/JavaScript event handlers that respond to browser window–level actions such as page load, resize, scroll, focus, or unload, allowing developers to execute scripts when these events occur (e.g., onload, onresize, onscroll).
| Window Event Attributes | Description |
|---|---|
| onafterprint | Used with onbeforeprint to perform actions after the page is printed. |
| onbeforeprint | The alert message display before the print dialogue box appears. |
| onbeforeunload | The onbeforeunload event run when the document is about to be unloaded. |
| onerror | This attribute works when an error occurs while loading an external file. |
| onhashchange | This attribute works when there has been changes to the anchor part. |
| onload | This attribute works when an object has been loaded. |
| onoffline | The onoffline event attribute works when the browser work in offline mode. |
| ononline | The ononline event attribute works when the browser starts working in online mode. |
| onpageshow | This event occurs when a user navigates to a website. |
| onresize | The onresize event attribute is triggered each time when resize the browser window size. |
| onunload | Fired when the document is unloaded (e.g., when navigating away). |
Form Event Attributes
Form Event Attributes are HTML/JavaScript event handlers that respond to user interactions with forms, such as submitting, resetting, or changing input fields. They allow developers to execute scripts when these actions occur.
Form Event Attributes | Description |
|---|---|
| onblur | This attribute is mostly used in Form validation code. |
| onchange | The onchange event attribute works when the value of the element changes and select the new value from the List. |
| oncontextmenu |