JavaScript Mouse Events

Mouse Events happen when the user interacts with the mouse.

Common Mouse Events:

• click
• dblclick
• mouseover / mouseout
• mousemove
• mousedown / mouseup

Mouseover and Mouseout

Example

Move mouse over this box

const box = document.getElementById("box");

// Let box listen for mouseover

box.addEventListener("mouseover", function () {

  box.innerHTML = "Mouse is over me!";

});

// Let box listen for mouseout

box.addEventListener("mouseout", function () {

  box.innerHTML = "Mouse is out!";

});

Share

Common Mouse Events

• click Fires after both a mousedown and mouseup event occur on the same element with the main mouse button (usually the left).
• dblclick Fires after two rapid clicks on the same element.
• mousedown / mouseup These events fire when a mouse button is pressed down (mousedown) or released (mouseup) over an element, respectively.
• mousemove Fires continuously as the mouse pointer moves over an element, providing positional information (coordinates) about the cursor.
• mouseover Fires when the pointer moves over an element (or one of its children).
• mouseout Fires when the pointer leaves an element.
• mouseenter Similar to mouseover, but fire when the pointer enters an element, not its descendants, making it more sensible for use cases like CSS :hover behavior.
• mouseleave Similar to mouseout, but fire when the pointer leaves an element, not its descendants, making it more sensible for use cases like CSS :hover behavior.
• contextmenu Fires when the user attempts to open the context menu, typically by right-clicking.
• wheel Fires when the mouse wheel is rotated, commonly used for scrolling or zooming functionality.
• drag events A series of events (dragstart, dragend, dragover, etc.) used for implementing drag-and-drop interfaces.

Mouse Position

The MouseEvent interface provides an event object which contains useful properties like pointer coordinates, which mouse button are pressed, and more.

Example

Move the mouse in this window!

// Let document listen for mousemove

document.addEventListener("mousemove", function (event) {

  document.getElementById("demo").innerHTML =

  "X: " + event.clientX + " Y: " + event.clientY;

});