Flash cards
Review the key moves
What is the main idea behind JavaScript Mouse Events?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
<___ id="box" style="width:200px;height:100px;padding:16px;border:1px solid #000;"> Move mouse over this boxPut the learning moves in the order that makes the concept easiest to apply.
Mouse Events happen when the user interacts with the mouse.
Common Mouse Events
- click
- dblclick
- mouseover / mouseout
- mousemove
- mousedown / mouseup
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 = "Move 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.
event.clientXA For modern, device independent input handling that includes touch and pen, developers often use the newer Pointer Events API .