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!");
});