Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What are common HTML Events supported by JavaScript?
JavaScript supports numerous HTML events that allow you to create interactive web pages. These events are triggered by user actions like clicks, keyboard input, or changes to HTML elements.
Mouse Events
Mouse events are the most commonly used events for creating interactive interfaces:
| Event | Description |
|---|---|
onclick |
Triggers when an element is clicked |
ondblclick |
Triggers on a mouse double-click |
oncontextmenu |
Triggers when right-click context menu appears |
onmousedown |
Triggers when mouse button is pressed down |
onmouseup |
Triggers when mouse button is released |
Example: Basic Mouse Events
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events Example</title>
</head>
<body>
<button id="myButton">Click Me!</button>
<p id="output"></p>
<script>
const button = document.getElementById('myButton');
const output = document.getElementById('output');
button.onclick = function() {
output.innerHTML = 'Button was clicked!';
};
button.ondblclick = function() {
output.innerHTML = 'Button was double-clicked!';
};
</script>
</body>
</html>
Keyboard Events
Keyboard events handle user input from the keyboard:
| Event | Description |
|---|---|
onkeydown |
Triggers when a key is pressed down |
onkeyup |
Triggers when a key is released |
onkeypress |
Triggers when a key is pressed and released |
Form Events
Form events are essential for handling user input validation and submission:
| Event | Description |
|---|---|
onsubmit |
Triggers when a form is submitted |
onchange |
Triggers when an input value changes |
onfocus |
Triggers when an element gains focus |
onblur |
Triggers when an element loses focus |
Drag and Drop Events
These events enable drag and drop functionality in web applications:
| Event | Description |
|---|---|
ondragstart |
Triggers when dragging starts |
ondrag |
Triggers while an element is being dragged |
ondragenter |
Triggers when dragged element enters a drop target |
ondragover |
Triggers while dragged element is over a drop target |
ondragleave |
Triggers when dragged element leaves a drop target |
ondrop |
Triggers when dragged element is dropped |
ondragend |
Triggers when dragging operation ends |
Page Load Events
These events help you control when your JavaScript code executes:
| Event | Description |
|---|---|
onload |
Triggers when page finishes loading |
onunload |
Triggers when page is being unloaded |
onresize |
Triggers when browser window is resized |
Example: Form Event Handling
<!DOCTYPE html>
<html>
<head>
<title>Form Events Example</title>
</head>
<body>
<form id="myForm">
<input type="text" id="nameInput" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>
<p id="message"></p>
<script>
const form = document.getElementById('myForm');
const input = document.getElementById('nameInput');
const message = document.getElementById('message');
input.onfocus = function() {
message.innerHTML = 'Input field is focused';
};
input.onblur = function() {
message.innerHTML = 'Input field lost focus';
};
form.onsubmit = function(event) {
event.preventDefault();
message.innerHTML = 'Form submitted with: ' + input.value;
};
</script>
</body>
</html>
Conclusion
HTML events are the foundation of interactive web development. Understanding mouse, keyboard, form, and page events allows you to create responsive and user-friendly web applications that react to user interactions.
228 Views
