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
<div id="box" style="width:200px;height:100px;border:1px solid #000;">
Move mouse here
</div>
<script>
const box = document.getElementById("box");
// Let document listen for mouseover
box.addEventListener("mouseover", function () {
box.innerHTML = "Mouse is over me!";
});
// Let document listen for mouseout
box.addEventListener("mouseout", function () {
box.innerHTML = "Move mouse here";
});
</script>
Try it Yourself »
Mouse Position
Example
<p id="demo">Move the mouse!</p>
<script>
// Let document listen for mousemove
document.addEventListener("mousemove", function (event) {
document.getElementById("demo").innerHTML =
"X: " + event.clientX + " Y: " + event.clientY;
});
</script>
Try it Yourself »
