Mouse Events happen when the user interacts with the mouse.
Common Mouse Events:
- click
- dblclick
- mouseover / mouseout
- mousemove
- mousedown / mouseup
Note: Mouse events are crucial for creating interactive web pages and applications, triggering specific functions in response to user actions like mouse clicks, scrolls, and movements.
Mouseover and Mouseout
Example
<div id="box" style="width:200px;height:100px;padding:16px;border:1px solid #000;">
Move mouse over this box
</div>
<script>
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!";
});
</script>
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
<p id="demo">Move the mouse in this window!</p>
<script>
// Let document listen for mousemove
document.addEventListener("mousemove", function (event) {
document.getElementById("demo").innerHTML =
"X: " + event.clientX + " Y: " + event.clientY;
});
</script>
Note: A For modern, device independent input handling that includes touch and pen, developers often use the newer Pointer Events API.