JavaScript Events

JavaScript Mouse Events

Written by Swapnil RajaPublished 24 Aug 2026

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.

The Mouse Events

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.

mousedown and mouseup

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.

Hovering

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.

Coordinates

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.

Which Button Was Pressed

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.

Double Click

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>

Try It Yourself

Run the above example in the Try It Editor.

Try mousemove:

Add a mousemove listener and watch the numbers change constantly.

Important Points

click is the most common mouse event.
A click is 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.

Conclusion

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.

PreviousJavaScript Event Object NextJavaScript Keyboard Events