Common Events: Mouse, Keyboard, and Form in JavaScript
In JavaScript, you can handle various browser events, such as mouse clicks, key presses, and form interactions. Here, we'll explore how to manage these events.
Mouse Events:
Mouse events include things like clicking a button or moving the mouse over an element.
- click: Triggered when the user clicks an element with the primary mouse button.
- mouseenter: Triggered when the mouse pointer enters an element's region.
- mouseleave: Triggered when the mouse pointer leaves an element's region.
Examples:
click
const button = document.querySelector("button");
button.addEventListener("click", () => {
alert("You clicked the button!");
});Explanation:
In this example, when the user clicks the button, the clickevent is triggered and displays an alert message.
mouseenter
const box = document.querySelector(".box");
box.addEventListener("mouseenter", () => {
console.log("The mouse has entered the box area");
});Explanation:
This event is triggered when the mouse cursor enters the area of the element with the `box` class, displaying a message in the console.
mouseleave
const box = document.querySelector(".box");
box.addEventListener("mouseleave", () => {
console.log("The mouse has left the box area");
});Explanation:
In this case, the `mouseleave` event is triggered when the mouse leaves the area of the element with the `box` class, displaying a message in the console.
Keyboard Events:
Keyboard events are used to detect when the user presses a key.
- keydown: Triggered when a key is pressed down.
- keypress: Triggered when a key produces a character value.
- keyup: Triggered when a key is released.
Examples:
keydown
document.addEventListener("keydown", (event) => {
console.log(`You pressed the key: ${event.key}`);
});Explanation:
This event is triggered when any key is pressed. The example shows the name of the pressed key in the console.
keypress
document.addEventListener("keypress", (event) => {
console.log(`You pressed a key with value: ${event.key}`);
});Explanation:
In this example, the `keypress` event detects when a key that produces a value (like a letter or number) is pressed.
keyup
document.addEventListener("keyup", (event) => {
console.log(`You released the key: ${event.key}`);
});Explanation:
The keyup event is triggered when the user stops pressing a key, displaying the name of the released key in the console.
Form Events:
Form events are very useful for handling user interaction when submitting data.
- submit: Triggered when a form is submitted.
- focus: Triggered when a form field receives focus.
- blur: Triggered when a form field loses focus.
- change: Triggered when the value of a form field changes.
- input: Triggered when the value of a form field changes while the user interacts with it.
Examples:
`submit`
const form = document.querySelector("form");
form.addEventListener("submit", (event) => {
event.preventDefault(); // Prevents form submission
console.log("Form submitted!");
});Explanation:
This event is triggered when the form is submitted. In the example, the form is not submitted by default, and instead, a message is displayed in the console.
`focus`
const field = document.querySelector("input");
field.addEventListener("focus", () => {
console.log("The input field has received focus");
});Explanation:
The `focus` event is triggered when the input field receives focus, such as when the user clicks on it.
`blur`
const field = document.querySelector("input");
field.addEventListener("blur", () => {
console.log("The input field has lost focus");
});Explanation:
The `blur` event is triggered when the input field loses focus, such as when the user clicks outside of it.
Exercises
The rest of the content is available only for registered and premium users!
JavaScript Concepts and Reference
Functions
Objects in JavaScript
Arrays
DOM (Document Object Model)
Error Handling
Promises and Asynchronicity
Modules in JavaScript
ES6 and Advanced Features
What are the types of events in JavaScript? What are mouse events in JavaScript? What are keyboard events in JavaScript? How can mouse and keyboard events be handled? JavaScript event list JavaScript events pdf JavaScript DOM and events Mouseover JavaScript Click event JavaScript AddEventListener JavaScript events Types of js events