Pointer Events are a modern web API that allows you to handle all types of input events (mouse, touch, pen, etc.) with a single set of events.

If you've ever worked with mouse and touch events across browsers and devices, you may have fallen into the trap of handling both mouse and touch events.

This can lead to a lot of boilerplate code and edge cases to handle. Pointer events solve this problem by providing a single set of events that work across all input devices.

Hopefully this saves you some time and headaches in the future.

Comparison

With Mouse and Touch Events

element.addEventListener('mousedown', handleStart)
element.addEventListener('touchstart', handleStart)

element.addEventListener('mousemove', handleMove)
element.addEventListener('touchmove', handleMove)

element.addEventListener('mouseup', handleEnd)
element.addEventListener('touchend', handleEnd)

// even more complicated with touchcancel, touchleave, etc and also removing events.

With Pointer Events

element.addEventListener('pointerdown', handleStart)
element.addEventListener('pointermove', handleMove)
element.addEventListener('pointerup', handleEnd)