Event

`MouseEvent`

Creates a new MouseEvent representing a mouse interaction

Syntax

JavaScript

new MouseEvent(type, options?)

Parameters

Parameter	Type	Description
type	string	The type of mouse event (click, dblclick, mousedown, mousemove, etc.)
options	MouseEventInit	Options including clientX, clientY, button, ctrlKey, etc.

Return Value

A new MouseEvent object

Examples

Basic Usage

document.addEventListener('click', (e: MouseEvent) => {
  console.log('Clicked at:', e.clientX, e.clientY)
})

Practical Example

const canvas = document.querySelector('canvas')!
canvas.addEventListener('mousemove', (e: MouseEvent) => {
  const rect = canvas.getBoundingClientRect()
  const x = e.clientX - rect.left
  const y = e.clientY - rect.top
  console.log(`Mouse at: ${x}, ${y}`)
})

Advanced Usage

function simulateClick(el: Element, x: number, y: number) {
  const event = new MouseEvent('click', {
    clientX: x,
    clientY: y,
    bubbles: true
  })
  el.dispatchEvent(event)
}

Understanding MouseEvent

The MouseEvent method in JavaScript creates a new MouseEvent representing a mouse interaction. It belongs to the Event object and is one of the most widely used methods for working with event values in modern JavaScript and TypeScript applications.

The method signature is new MouseEvent(type, options?). It accepts 2 parameters: type, options. When called, it returns a new mouseevent object. Understanding when and how to use MouseEvent() helps you write more expressive, readable code.

Common use cases for MouseEvent include data transformation, input validation, API response processing, and building reusable utility functions. It works well alongside related methods like event-keyboardevent, event-addeventlistener, event-pointerevent, enabling you to chain operations together for complex data manipulation pipelines.

Browser support for MouseEvent is excellent across all modern browsers including Chrome, Firefox, Safari, and Edge. It is also fully supported in Node.js and Deno. For older environments, transpilation with Babel or a polyfill may be needed.