Ganesh Dutt
Events
Events in JavaScript are actions or occurrences that happen in the browser when a
user interacts with a web page. These interactions could be clicking a button, typing
in an input field, moving the mouse, or resizing the window, among others.
When an event occurs, it triggers a response in the form of a function or a series of
actions called an event handler. This response can change the content, appearance, or
behavior of the web page dynamically, providing interactivity and responsiveness to
user input.
Events are essential for creating interactive web applications because they allow
developers to listen for specific actions and respond accordingly. For example, you can
use events to validate user input in a form, display a pop-up message when a button
is clicked, or update the content of a webpage when the mouse hovers over an
element.
In JavaScript, you can attach event handlers to HTML elements using event listeners.
These event listeners listen for specific events, such as clicks or keypresses, and
execute a function when the event occurs. This allows developers to control the
behavior of their web pages based on user actions, making the user experience more
engaging and dynamic.
Events can be categorized into several types based on how they are triggered or when
they occur. Here are some common types of events:
1. Mouse Events: These events are triggered by user interactions with the mouse,
such as clicking, hovering, dragging, or scrolling.
Examples include click, mouseover, mouseout, mousedown, mouseup, mousemove.
Ganesh Dutt
2. Keyboard Events: These events are triggered by user interactions with the
keyboard, such as pressing or releasing keys.
Examples include keydown, keyup, and keypress.
3. Form Events: These events are related to user interactions with HTML forms, such
as submitting a form, changing the value of an input field, or focusing on an input
field.
Examples include submit, change, input, focus, and blur.
4. Document Events: These events are related to the loading and unloading of the
web page document, such as when the document finishes loading
(DOMContentLoaded), when the document is fully loaded (load), or when the user
navigates away from the page (unload).
5. Window Events: These events are related to interactions with the browser
window, such as resizing the window or scrolling the window.
Examples include resize, scroll, and beforeunload.
These are just a few examples of the types of events in JavaScript. There are many
more specific events and event-related concepts that can be used to create interactive
and dynamic web applications.
1 ) Mouse events
Mouse events in JavaScript are triggered by user interactions with the mouse. These
events allow you to respond to actions such as clicking, moving, hovering, dragging,
and releasing the mouse button. Here are some common mouse events:
Ganesh Dutt
1. click: Fired when the user clicks on an element.
2. dblclick: Fired when the user double-clicks on an element.
3. mousedown: Fired when the mouse button is pressed down on an element.
4. mouseup: Fired when the mouse button is released after being pressed down on an
element.
5. mousemove: Fired when the mouse pointer is moved while it is over an element.
6. mouseover: Fired when the mouse pointer moves onto an element.
7. mouseout: Fired when the mouse pointer moves out of an element.
8. mouseenter: Fired when the mouse pointer enters an element.
9. mouseleave: Fired when the mouse pointer leaves an element.
Here's an example of how you can use mouse events in JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Events Example</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: blue;
margin: 50px;
}
</style>
</head>
<body>
Ganesh Dutt
<div id="box"></div>
<script>
const box = document.getElementById('box');
box.addEventListener('click', function() {
this.style.backgroundColor = 'red';
});
box.addEventListener('mouseover', function() {
this.style.opacity = '0.5';
});
box.addEventListener('mouseout', function() {
this.style.opacity = '1';
});
box.addEventListener('mousedown', function() {
this.style.backgroundColor = 'red';
});
box.addEventListener('mouseup', function() {
this.style.backgroundColor = 'blue';
});
</script>
</body>
</html>
Ganesh Dutt
2 )Keyboard events
Keyboard events in JavaScript are triggered by user interactions with the keyboard.
These events allow you to respond to actions such as pressing, releasing, or typing
keys on the keyboard. Here are some common keyboard events:
1. keydown: Fired when a key is pressed down.
2. keyup: Fired when a key is released.
3. keypress: Fired when a key that produces a character value is pressed down.
Here's an example demonstrating how to use keyboard events in JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyboard Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<p id="output"></p>
<script>
const textInput = document.getElementById('textInput');
const output = document.getElementById('output');
textInput.addEventListener('keydown', function(event) {
output.textContent = Key pressed: ${event.key};
Ganesh Dutt
});
textInput.addEventListener('keyup', function(event) {
output.textContent = Key released: ${event.key};
});
</script>
</body>
</html>
3. Form Events:
Form events in JavaScript are triggered by user interactions with HTML form
elements. These events allow you to respond to actions such as submitting a form,
changing the value of an input field, or focusing on an input field. Here are some
common form events:
1. submit: Fired when a form is submitted.
2. reset: Fired when a form is reset (e.g., by clicking a reset button).
3. change: Fired when the value of an input field is changed and then loses focus (e.g.,
when the user types something into a text input and then clicks elsewhere).
4. input: Fired when the value of an input field is changed (e.g., when the user types
into a text input).
5. focus: Fired when an input field receives focus (e.g., when the user clicks on it).
Here's an example of how you can use form events in JavaScript:
Ganesh Dutt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Events Example</title>
</head>
<body>
<form id="myForm">
<input type="text" id="name" placeholder="Enter your name">
<input type="email" id="email" placeholder="Enter your email">
<button type="submit">Submit</button>
</form>
<p id="message"></p>
<script>
const form = document.getElementById('myForm');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const message = document.getElementById('message');
form.addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from submitting normally
// Perform form validation
if (nameInput.value.trim() === '' || emailInput.value.trim() === '') {
message.textContent = 'Please fill out all fields.';
return;
Ganesh Dutt
// If the form is valid, display a success message
message.textContent = 'Form submitted successfully!';
});
nameInput.addEventListener('input', function() {
// Clear the message when the name input is changed
message.textContent = '';
});
emailInput.addEventListener('input', function() {
// Clear the message when the email input is changed
message.textContent = '';
});
</script>
</body>
</html>
In this example:
- When the form is submitted (submit event), a validation check is performed to
ensure that both the name and email fields are filled out. If either field is empty, an
error message is displayed.
- When the value of the name input or email input is changed (input event), the error
message is cleared.
- If the form is successfully submitted, a success message is displayed.
