Event

`PointerEvent`

Creates a new PointerEvent representing a pointer interaction from mouse, pen, or touch

Syntax

JavaScript

new PointerEvent(type, options?)

Parameters

Parameter	Type	Description
type	string	The type of pointer event (pointerdown, pointermove, pointerup, etc.)
options	PointerEventInit	Options including pointerId, pointerType, pressure, width, height

Return Value

A new PointerEvent object

Examples

Basic Usage

const canvas = document.querySelector('canvas')!
canvas.addEventListener('pointerdown', (e: PointerEvent) => {
  console.log('Pointer type:', e.pointerType)
  console.log('Pressure:', e.pressure)
})

Practical Example

const el = document.querySelector('.draggable')!
el.addEventListener('pointerdown', (e: PointerEvent) => {
  el.setPointerCapture(e.pointerId)
})
el.addEventListener('pointermove', (e: PointerEvent) => {
  if (el.hasPointerCapture(e.pointerId)) {
    console.log('Dragging at:', e.clientX, e.clientY)
  }
})

Advanced Usage

function onDraw(canvas: HTMLCanvasElement, callback: (x: number, y: number) => void) {
  canvas.addEventListener('pointermove', (e: PointerEvent) => {
    if (e.pressure > 0) {
      callback(e.clientX, e.clientY)
    }
  })
}

Understanding PointerEvent

The PointerEvent method in JavaScript creates a new PointerEvent representing a pointer interaction from mouse, pen, or touch. 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 PointerEvent(type, options?). It accepts 2 parameters: type, options. When called, it returns a new pointerevent object. Understanding when and how to use PointerEvent() helps you write more expressive, readable code.

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

Browser support for PointerEvent 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.