Event

`WheelEvent`

Creates a new WheelEvent representing a wheel interaction typically from a mouse scroll wheel

Syntax

JavaScript

new WheelEvent(type, options?)

Parameters

Parameter	Type	Description
type	string	The type of wheel event (wheel)
options	WheelEventInit	Options including deltaX, deltaY, deltaZ, deltaMode

Return Value

A new WheelEvent object

Examples

Basic Usage

document.addEventListener('wheel', (e: WheelEvent) => {
  console.log('Scroll delta:', e.deltaY)
})

Practical Example

const zoomable = document.querySelector('.canvas')!
let zoom = 1
zoomable.addEventListener('wheel', (e: WheelEvent) => {
  e.preventDefault()
  zoom += e.deltaY > 0 ? -0.1 : 0.1
  zoom = Math.max(0.1, Math.min(5, zoom))
  console.log('Zoom:', zoom)
}, { passive: false })

Advanced Usage

function onScrollDirection(el: HTMLElement, callback: (dir: 'up' | 'down') => void) {
  el.addEventListener('wheel', (e: WheelEvent) => {
    callback(e.deltaY > 0 ? 'down' : 'up')
  })
}

Understanding WheelEvent

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

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

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