Introduction to mouse event
During interactions with HTML elements, events are triggered as a result of user actions, such as mouse movements, clicks, or keyboard inputs. These events specifically related to mouse actions are referred to as mouse events.
Mouse event which will cover in this article
click
mousedown
mouseup
mousemove
mouseover
mouseout
mouseenter
mouseleave
1. click
This event occurs when the mouse button is pressed and released on an element
Example: Adding an event listener to a button and logging a message in the console when the button is clicked
const btn = document.getElementById('btn')
btn.addEventListener('click', function(){
console.log("Button is clicked")
});
addEventListener is a method used to register event handlers on a DOM element. It allows you to register a function (known as an event handler) to be executed when a specific type of event occurs on the element.
2. mousedown
This event occurs when the mouse presses down over the element
Example: Displaying an alert message when the mouse button is pressed down over an image
document.getElementById("myImage").addEventListener("mousedown", function() {
alert("Mouse button pressed down!");
});
3. mouseup
This event occurs when the mouse is released over an element
Example: Changing the color of a paragraph when the mouse button is released
document.getElementById("myPara").addEventListener("mouseup", function() {
this.style.color = "green";
});
4. mouseover
This event occurs when the mouse enters the area of an element
Example: Changing the border color of the div when the mouse moves over it
document.getElementById("myButton").addEventListener("mouseover", function() {
this.style.borderColor = "yellow";
});
5. mouseout
This event occurs when the mouse leave the area of an element
Example: Resetting the background color of an element when the mouse moves out of it.
document.getElementById("myDiv").addEventListener("mouseout", function() {
this.style.backgroundColor = "blue"; // Reset color
});
6. mouseenter
The mouseenter event is triggered when the mouse pointer enters the specific element. It is similar to mouseover but the difference is it does not trigger the child element while the mouseover triggers the element as well as its children.
Example: Displaying a message when the mouse enters a specific area.
document.getElementById("myArea").addEventListener("mouseenter", function() {
alert("Mouse entered the area without trigeering the children!");
});
7. mouseleave
The mouseleave event is triggered when the mouse pointer leaves the specific element. It is similar to mouseout but it does not bubble which means that it won't be triggered by a child element
Example: Displaying a message when the mouse left a specific area.
document.getElementById("myArea").addEventListener("mouseleave", function() {
alert("Mouse left the area without trigeering the children!");
});