JavaScript MouseEvent() Constructor

Beginner
5 min read
Updated: Nov 2026
3 examples
Constructor
Decorative image with the word MOUSEEVENT

Definition

new MouseEvent(type, options) creates a MouseEvent you can inspect or fire with dispatchEvent (MDN).

Pass the required arguments shown below. Pass the type string and optional MouseEventInit fields, then dispatch if needed.

Syntax

Create a MouseEvent. Start with this line.

JavaScript
new MouseEvent(type) / new MouseEvent(type, options)
CallWhat it does
new MouseEvent(type) / new MouseEvent(type, options)Primary signature.

Built into the browser. Call new MouseEvent(...) — no import required.

Library declarations
JavaScript
new MouseEvent(type) / new MouseEvent(type, options)

Parameters

ParameterDescription
typeRequired. Event name (case-sensitive)
optionsOptional. Coords, buttons, keys, + Event/UIEvent fields

Return Value

Return ValueDescription
*A new MouseEvent instance

JavaScript Examples

Example 1 — Create a Basic click

Type alone is enough; numeric fields default to 0.

JavaScript
const event = new MouseEvent("click");

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

How It Works

  1. Pass a type. "click" is case-sensitive.
  2. Defaults apply. Coords and button start at 0.
  3. You get a real instance. instanceof MouseEvent is true.
  4. Nothing fires yet. Create ≠ dispatch — call dispatchEvent next.

Example 2 — Dispatch a Synthetic Click

Set Event flags, then fire the event on a target element.

JavaScript
const btn = document.getElementById("save");
btn.addEventListener("click", (e) => {
  console.log(e.type, e.clientX, e.isTrusted);
});

const event = new MouseEvent("click", {
  bubbles: true,
  cancelable: true,
  view: window,
  clientX: 40,
  clientY: 12
});
btn.dispatchEvent(event);
// "click" 40 false
Try It Yourself

How It Works

  1. Register a listener. Same as a real user click.
  2. Build options. bubbles/cancelable/view plus coords.
  3. Dispatch. The listener runs with your property values.
  4. isTrusted is false. Script-made events are not browser-trusted.

Example 3 — button and Modifier Keys

Fill press-related fields without a physical mouse action.

JavaScript
const event = new MouseEvent("mousedown", {
  button: 2,      // secondary (usually right)
  buttons: 2,     // right held (bit-field)
  shiftKey: true,
  ctrlKey: false
});

console.log(event.button);    // 2
console.log(event.buttons);   // 2
console.log(event.shiftKey);  // true
Try It Yourself

How It Works

  1. button. Which button changed (2 = secondary).
  2. buttons. Bit-field of currently held buttons.
  3. Modifiers. shiftKey, ctrlKey, altKey, metaKey.
  4. Still synthetic. Useful for tests and UI automation paths.
Compatibility

Browser Support

The MouseEvent() constructor is marked Baseline Widely available on MDN (since July 2015).

✓ Baseline · Widely available

MouseEvent()

Creates a MouseEvent from a type string and optional options (coords, button, modifiers, Event flags). Prefer over deprecated initMouseEvent(). Does not move the pointer.

100% Widely available
Google Chrome Yes (Baseline)
Yes
Microsoft Edge Yes (Baseline)
Yes
Mozilla Firefox Yes (Baseline)
Yes
Apple Safari Yes (Baseline)
Yes
Opera Yes (Baseline)
Yes
Internet Explorer 9+ (legacy)
Yes
MouseEvent() Excellent

Bottom line: Safe everyday DOM API for tests and synthetic UI. See the MDN MouseEvent() reference.

Frequently Asked Questions

new MouseEvent(type, options) creates a MouseEvent object you can inspect or dispatch with element.dispatchEvent(event). It does not move the real mouse pointer.
No. MDN marks the MouseEvent() constructor as Baseline Widely available (since July 2015). It is a standard DOM constructor — not Deprecated, Experimental, or Non-standard. Prefer it over deprecated initMouseEvent().
The type is a case-sensitive string. Browsers commonly set click, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, or mouseup.
No. MDN notes that setting screen/client coordinates only fills event properties — they do not move the mouse pointer on screen.
button describes which button changed for press/release-related events (0 left, 1 middle, 2 right). buttons is a bit-field of which buttons are currently held (1 left, 2 right, 4 middle).
Create the event with new MouseEvent("click", { bubbles: true, cancelable: true, view: window }), then call target.dispatchEvent(event). Listeners on that element (and ancestors if it bubbles) will run.

Next: getModifierState()

Ask whether a named modifier key was active for the event.

getModifierState tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

9 people found this page helpful

JavaScript Event stopPropagation() Method JavaScript MouseEvent getModifierState() Method