JavaScript MouseEvent Constructor

What You’ll Learn

The MouseEvent() constructor builds a MouseEvent you can read or send with dispatchEvent(). Learn type strings, coordinates, modifier keys, button / buttons, and synthetic clicks—with five examples and try-it labs.

Introduction

Real mouse clicks create MouseEvent objects automatically. Sometimes you need to build one yourself—for tests, demos, or triggering the same listeners without a physical click.

new MouseEvent("click", options) returns that object. Pair it with element.dispatchEvent(event) to run handlers as if the user clicked (when the event is configured to bubble/cancel like a real one).

Understanding the MouseEvent() Constructor

You pass an event type string and an optional options object. Options include MouseEvent-specific fields plus those from UIEvent / Event (for example bubbles, cancelable, view, detail).

• type — case-sensitive name such as "click".
• Coordinates — clientX/clientY, screenX/screenY (default 0).
• Modifiers — ctrlKey, shiftKey, altKey, metaKey (default false).
• Buttons — button (which changed) and buttons (bit-field of held buttons).
• relatedTarget — useful for enter/leave / over/out style events.

📝 Syntax

new MouseEvent(type)
new MouseEvent(type, options)

Parameters

• type — String event name (case-sensitive). Common values: click, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup.
• options (optional) — Object with UIEvent properties plus MouseEvent fields below.

MouseEvent option fields (MDN)

Return value

A new MouseEvent object.

🖱️ button vs buttons

Examples Gallery

Examples follow MDN MouseEvent(). Use View Output or Try It Yourself.

const event = new MouseEvent("click");

console.log(event.type);     // "click"
console.log(event.clientX);  // 0 (default)
console.log(event.button);   // 0 (default)
console.log(event instanceof MouseEvent); // true

click
0
0
true

const event = new MouseEvent("mousemove", {
  clientX: 120,
  clientY: 45,
  screenX: 500,
  screenY: 300
});

console.log(event.clientX, event.clientY); // 120 45
console.log(event.screenX, event.screenY); // 500 300

120 45
500 300

const event = new MouseEvent("click", {
  ctrlKey: true,
  shiftKey: true,
  altKey: false,
  metaKey: false
});

console.log(event.ctrlKey);   // true
console.log(event.shiftKey);  // true
console.log(event.altKey);    // false
console.log(event.metaKey);   // false

true
true
false
false

const leftDown = new MouseEvent("mousedown", {
  button: 0,   // left changed
  buttons: 1   // left currently held
});

const rightClick = new MouseEvent("mousedown", {
  button: 2,   // right changed
  buttons: 2   // right held
});

console.log(leftDown.button, leftDown.buttons);   // 0 1
console.log(rightClick.button, rightClick.buttons); // 2 2

0 1
2 2

const btn = document.createElement("button");
btn.textContent = "Go";
btn.addEventListener("click", (e) => {
  console.log("clicked via", e.type, "clientX=", e.clientX);
});

const event = new MouseEvent("click", {
  bubbles: true,
  cancelable: true,
  view: window,
  clientX: 88,
  clientY: 16
});

btn.dispatchEvent(event);
// clicked via click clientX= 88

clicked via click clientX= 88

🚀 Common Use Cases

• Unit/UI tests that need a realistic mouse event object.
• Demo buttons that trigger the same click handlers as a real click.
• Simulating modifier-key clicks (Ctrl/Shift) in tutorials or automation helpers.
• Feeding coordinates into code that reads clientX / clientY.
• Teaching how EventTarget dispatchEvent works with MouseEvent.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Some implementations throw TypeError if screen/client fields are not numbers.
• Related: dispatchEvent(), addEventListener(), EventTarget(), WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN, Window, JavaScript hub.

💡 Best Practices