Loading lesson path
Concept visual
Start at both ends
Mouse Events happen when the user interacts with the mouse.
Formula
click dblclick mouseover / mouseout mousemove mousedown / mouseupMouse events are crucial for creating interactive web pages and applications, triggering specific functions in response to user actions like mouse clicks, scrolls, and movements.
<div id="box" style="width:200px;height:100px;padding:16px;border:1px solid #000;"></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 = "Move is out!";
});</script>
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.
Formula
mousedown / mouseupThese 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
Formula
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
Formula
A series of events (dragstart, dragend, dragover, etc.) used for implementing drag - and - drop interfaces.The MouseEvent interface provides an event object which contains useful properties like pointer coordinates, which mouse button are pressed, and more.
Using event.clientX and event.clientY <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> A For modern, device independent input handling that includes touch and pen, developers often use the newer Pointer Events API.