JavaScript Events
Mouse events report clicks, movement and hovering over an element.
click is by far the most used, but there are several others.
Each one gives coordinates telling you where the pointer was.
Example
javascript
document.body.innerHTML = '<button id="btn">Go</button>';
document.getElementById("btn").addEventListener("click", function () {
console.log("clicked");
});
document.getElementById("btn").click();The output is clicked.
click and dblclick for pressing.
mousedown and mouseup for the parts of a click.
mouseenter and mouseleave for hovering.
Syntax
javascript
element.addEventListener("mouseenter", handler);Names are all lowercase with no separators.
A click is really these two events followed by click itself.
Example
javascript
document.body.innerHTML = '<button id="btn">Go</button>';
const btn = document.getElementById("btn");
const order = [];
btn.addEventListener("mousedown", function () { order.push("down"); });
btn.addEventListener("mouseup", function () { order.push("up"); });
btn.addEventListener("click", function () { order.push("click"); });
btn.dispatchEvent(new MouseEvent("mousedown"));
btn.dispatchEvent(new MouseEvent("mouseup"));
btn.dispatchEvent(new MouseEvent("click"));
console.log(order.join(" "));The output is down up click.
mouseenter and mouseleave do not fire again for child elements.
mouseover and mouseout do, which is often not what you want.
Example
javascript
document.body.innerHTML = '<div id="box">Hover me</div>';
const box = document.getElementById("box");
box.addEventListener("mouseenter", function () {
console.log("entered");
});
box.dispatchEvent(new MouseEvent("mouseenter"));For simple hover effects, CSS :hover is usually better.
clientX and clientY are relative to the visible window.
pageX and pageY include how far the page is scrolled.
Example
javascript
document.body.innerHTML = '<div id="box">Box</div>';
document.getElementById("box").addEventListener("click", function (event) {
console.log(event.clientX + "," + event.clientY);
});
document.getElementById("box").dispatchEvent(
new MouseEvent("click", { clientX: 30, clientY: 40 })
);The output is 30,40, the position given when the event was made.
button is 0 for the left, 1 for the middle and 2 for the right.
Example
javascript
document.body.innerHTML = '<div id="box">Box</div>';
document.getElementById("box").addEventListener("mousedown", function (event) {
console.log(event.button === 0 ? "left" : "another button");
});
document.getElementById("box").dispatchEvent(
new MouseEvent("mousedown", { button: 0 })
);A right click also fires contextmenu, which opens the menu.
dblclick fires after two quick clicks, in addition to them.
Example
javascript
document.body.innerHTML = '<button id="btn">Go</button>';
document.getElementById("btn").addEventListener("dblclick", function () {
console.log("double");
});
document.getElementById("btn").dispatchEvent(new MouseEvent("dblclick"));The single click handlers still run first on a real double click.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Mouse Events</title>
<style>
#box { padding: 30px; background: #e0f2fe; }
</style>
</head>
<body>
<h1>Mouse Events</h1>
<div id="box">Move over me and click</div>
<p id="out"></p>
<script>
const box = document.getElementById("box");
const out = document.getElementById("out");
box.addEventListener("mouseenter", function () {
out.textContent = "Pointer entered";
});
box.addEventListener("mouseleave", function () {
out.textContent = "Pointer left";
});
box.addEventListener("click", function (event) {
out.textContent = "Clicked at " + event.clientX + ", " + event.clientY;
});
</script>
</body>
</html>Run the above example in the Try It Editor.
Try mousemove:
Add a mousemove listener and watch the numbers change constantly.
click is the most common mouse event.mousedown, then mouseup, then click.mouseenter and mouseleave ignore child elements.clientX and clientY give the pointer position.event.button says which mouse button was used.Mouse events cover everything a pointer can do to an element.
Most interfaces need only click, with the others for special cases.
For plain hover styling, CSS remains the simpler tool.