`, `
`, or ``, and [custom events](https://v3.vuejs.org/guide/component-custom-events.html#defining-custom-events) when you add it to vue components. Therefore, if you use [`handle(...)`](./src/DeviceInputEventHandlers.ts) in v-on directive on a vue component, it will always fail.
| Do this: | Don't do this: |
|---|
<template>
<div v-on:mousedown="(event) => { previous = handle(event, false, false, previous) }">
<!-- your HTML here -->
</div>
</template>
|
<template>
<your-component v-on:your-component-event="(event) => { previous = handle(event, false, false, previous) }">
<!-- your HTML here -->
</your-component>
</template>
|
#### Call the [`handleDrag(...)`](./src/event-handlers/DragEventHandler.ts), [`handleFocus(...)`](./src/event-handlers/FocusEventHandler.ts), [`handleKeyboard(...)`](./src/event-handlers/KeyboardEventHandler.ts) [`handleMouse(...)`](./src/event-handlers/MouseEventHandler.ts), [`handleTouch(...)`](./src/DeviceInputEventHandlers.tstouch), or [`handleWheel(...)`](./src/DeviceInputEventHandlers.tswheel) functions from their corresponding v-on listeners.
If you want minimize your project's final bundle size, consider importing just a few of the above handler functions. They are smaller than the generic [`handle(...)`](./src/DeviceInputEventHandlers.ts) function, because they don't implement all of the logic needed to handle every single input device event. Just like their generic counterpart, all of these handler functions:
- can be called from within v-on
- take roughly the same arguments.
- return an object with information about the event they received.
If none of this makes sense to you, that's OK. Just use the [`handle(...)`](./src/DeviceInputEventHandlers.ts) function. But if you're still following, keep reading to find out the differences between the specific handlers and their generic counterpart.
The [`handleDrag(...)`](./src/event-handlers/DragEventHandler.ts) function returns an [`EventInfo`](./src/event-handlers/handler-utils/EventInfo.ts)<[`DragInput`](./src/event-handlers/pointer-utils/DragInput.ts)> object. Unlike the [`handle(...)`](./src/DeviceInputEventHandlers.ts) function, it only supports the following v-on listeners:
The [`handleFocus(...)`](./src/event-handlers/FocusEventHandler.ts) function returns an [`EventInfo`](./src/event-handlers/handler-utils/EventInfo.ts)<[`FocusInput`](./src/event-handlers/focus-utils/FocusInput.ts)> object. Unlike the [`handle(...)`](./src/DeviceInputEventHandlers.ts) function, it only supports the following v-on listeners:
The [`handleKeyboard(...)`](./src/event-handlers/KeyboardEventHandler.ts) function returns an [`EventInfo`](./src/event-handlers/handler-utils/EventInfo.ts)<[`KeyboardInput`](./src/event-handlers/keyboard-utils/KeyboardInput.ts)> object. Unlike the [`handle(...)`](./src/DeviceInputEventHandlers.ts) function, it only supports the following v-on listeners:
The [`handleMouse(...)`](./src/event-handlers/MouseEventHandler.ts) function returns an [`EventInfo`](./src/event-handlers/handler-utils/EventInfo.ts)<[`PointerInput`](./src/event-handlers/pointer-utils/PointerInput.ts)> object. Unlike the [`handle(...)`](./src/DeviceInputEventHandlers.ts) function, it only supports the following v-on listeners:
The [`handleTouch(...)`](./src/DeviceInputEventHandlers.tstouch) function returns an [`EventInfo`](./src/event-handlers/handler-utils/EventInfo.ts)<[`PointerInput`](./src/event-handlers/pointer-utils/PointerInput.ts)> object. Unlike the [`handle(...)`](./src/DeviceInputEventHandlers.ts) function, it only supports the following v-on listeners:
The [`handleWheel(...)`](./src/DeviceInputEventHandlers.tswheel) function returns an [`EventInfo`](./src/event-handlers/handler-utils/EventInfo.ts)<[`ScrollInput`](./src/event-handlers/scroll-utils/ScrollInput.ts)> object. Unlike the [`handle(...)`](./src/DeviceInputEventHandlers.ts) function, it only supports the following v-on listeners:
Like the [`handle(...)`](./src/DeviceInputEventHandlers.ts) function, none of these handlers support custom Vue events.
#### Call the [`handle(...)`](./src/DeviceInputEventHandlers.ts), [`handleDevice(...)`](./src/event-handlers/DeviceEventHandler.ts), [`handleGamepad(...)`](./src/event-handlers/GamepadEventHandler.ts), or [`handleWindowResize(...)`](./src/DeviceInputEventHandlers.tswindowresize) functions from within your Vue component's `
```
The [`handle(...)`](./src/DeviceInputEventHandlers.ts) function can bind to any of the following event listeners:
| Target | .addEventListener( | Listener | , | Callback | ) | Event Type |
|---|
document | 'drag'
| (e: DragEvent) => { this.previous = handle(e, previous) }
| DragEvent |
'dragend'
| (e: DragEvent) => { this.previous = handle(e, previous)}
|
'dragenter'
| (e: DragEvent) => { this.previous = handle(e, previous)}
|
'dragleave'
| (e: DragEvent) => { this.previous = handle(e, previous)}
|
'dragover'
| (e: DragEvent) => { this.previous = handle(e, previous)}
|
'dragstart'
| (e: DragEvent) => { this.previous = handle(e, previous)}
|
'drop'
| (e: DragEvent) => { this.previous = handle(e, previous)}
|
window | 'devicemotion'
| (e: DeviceMotionEvent) => { this.previous = handle(e, previous)}
| DeviceMotionEvent |
'deviceorientation'
| (e: DeviceOrientationEvent) => { this.previous = handle(e, previous)}
| DeviceOrientationEvent |
document | 'scroll'
| (e: Event) => this.previous = handle(e, previous)}
| Event |
element | 'blur'
| (e: FocusEvent) => { this.previous = handle(e, previous)}
| FocusEvent |
'focus'
| (e: FocusEvent) => { this.previous = handle(e, previous)}
|
'focusin'
| (e: FocusEvent) => { this.previous = handle(e, previous)}
|
'focusout'
| (e: FocusEvent) => { this.previous = handle(e, previous)}
|
window | 'gamepadconnected'
| (e: GamepadEvent) => { this.previous = handle(e, previous)}
| GamepadEvent |
'gamepaddisconnected'
| (e: GamepadEvent) => { this.previous = handle(e, previous)}
|
document | 'keydown'
| (e: KeyboardEvent) => { this.previous = handle(e, previous)}
| KeyboardEvent |
'keypress'
| (e: KeyboardEvent) => { this.previous = handle(e, previous)}
|
'keyup'
| (e: KeyboardEvent) => { this.previous = handle(e, previous)}
|
element | 'auxclick'
| (e: MouseEvent) => { this.previous = handle(e, false, false, previous)}
| MouseEvent |
'click'
| (e: MouseEvent) => { this.previous = handle(e, previous)}
|
'contextmenu'
| (e: MouseEvent) => { this.previous = handle(e, previous)}
|
'dblclick'
| (e: MouseEvent) => { this.previous = handle(e, previous)}
|
'mousedown'
| (e: MouseEvent) => { this.previous = handle(e, previous)}
|
'mouseenter'
| (e: MouseEvent) => { this.previous = handle(e, previous)}
|
'mouseleave'
| (e: MouseEvent) => { this.previous = handle(e, previous)}
|
'mouseout'
| (e: MouseEvent) => { this.previous = handle(e, previous)}
|
'mouseover'
| (e: MouseEvent) => { this.previous = handle(e, previous)}
|
'mouseup'
| (e: MouseEvent) => { this.previous = handle(e, previous)}
|
'touchcancel'
| (e: TouchEvent) => { this.previous = handle(e, previous)}
| TouchEvent |
document | 'touchend'
| (e: TouchEvent) => { this.previous = handle(e, previous)}
|
'touchmove'
| (e: TouchEvent) => { this.previous = handle(e, previous)}
|
element | 'touchstart'
| (e: TouchEvent) => { this.previous = handle(e, previous)}
|
'wheel'
| (e: WheelEvent) => { this.previous = handle(e, previous)}
| WheelEvent |
window | 'resize'
| (e: UIEvent) => { this.previous = handle(e, previous)}
| UIEvent |
The [`handle(...)`](./src/DeviceInputEventHandlers.ts) function returns one of [`EventInfo`](./src/event-handlers/handler-utils/EventInfo.ts)<[`DeviceInput`](./src/event-handlers/device-utils/DeviceInput.ts)>, [`EventInfo`](./src/event-handlers/handler-utils/EventInfo.ts)<[`FocusInput`](./src/event-handlers/focus-utils/FocusInput.ts)>, [`EventInfo`](./src/event-handlers/handler-utils/EventInfo.ts)<[`GamepadInput`](./src/event-handlers/gamepad-utils/GamepadInput.ts)>, [`EventInfo`](./src/event-handlers/handler-utils/EventInfo.ts)<[`KeyboardInput`](./src/event-handlers/keyboard-utils/KeyboardInput.ts)>, [`EventInfo`](./src/event-handlers/handler-utils/EventInfo.ts)<[`DragInput`](./src/event-handlers/pointer-utils/DragInput.ts)>, [`EventInfo`](./src/event-handlers/handler-utils/EventInfo.ts)<[`PointerInput`](./src/event-handlers/pointer-utils/PointerInput.ts)>, [`EventInfo`](./src/event-handlers/handler-utils/EventInfo.ts)<[`ScrollInput`](./src/event-handlers/scroll-utils/ScrollInput.ts)>, [`EventInfo`](./src/event-handlers/handler-utils/EventInfo.ts)<[`WindowResizeInput`](./src/event-handlers/window-resize-utils/WindowResizeInput.ts)>, depending on the type of event passed into it.
If you want to slim your project's final bundle size, and you don't need to handle all of the above events, consider importing and using the [`handleDevice(...)`](./src/event-handlers/DeviceEventHandler.ts) or [`handleGamepad(...)`](./src/event-handlers/GamepadEventHandler.ts) functions, instead of the [`handle(...)`](./src/DeviceInputEventHandlers.ts) function.
The [`handleDevice(...)`](./src/event-handlers/DeviceEventHandler.ts) function returns an [`EventInfo`](./src/event-handlers/handler-utils/EventInfo.ts)<[`DeviceInput`](./src/event-handlers/device-utils/DeviceInput.ts)> object, and can only bind to the following event listeners:
The [`handleGamepad(...)`](./src/event-handlers/GamepadEventHandler.ts) function returns a [`EventInfo`](./src/event-handlers/handler-utils/EventInfo.ts)<[`GamepadInput`](./src/event-handlers/gamepad-utils/GamepadInput.ts)> object, and can only bind to the following event listeners:
The [`handleWindowResize(...)`](./src/DeviceInputEventHandlers.tswindowresize) function returns an [`EventInfo`](./src/event-handlers/handler-utils/EventInfo.ts)<[`WindowResizeInput`](./src/event-handlers/window-resize-utils/WindowResizeInput.ts)> object, and can only bind to the following event listener:
| Target | .addEventListener( | Listener | , | Callback | ) | Event Type |
|---|
window | 'resize'
| (e: UIEvent) => { this.previous = handle(e, previous)}
| UIEvent |
### How `@incremental.design/device-input-event-handlers` works:
If you peel back the surface of a modern web browser, there are a _lot_ of events firing [all of the time](https://www.youtube.com/watch?v=cCOL7MC4Pl0). As you scroll this webpage, hundreds of events are firing every second! But, listening to all of those events is a lot of work for the browser. If it had to describe everything that was happening in a given second, it would run out of memory in a matter of a few minutes! That's why browser have event listeners. When you use a v-on directive, or call `addEventListener` on an object in the browser's API, you're telling it _what_ to listen for and _when_ to alert you. Depending on what you listen for, you might receive just a few events, or you might receive a continuous stream. That's where this package's handlers shine.
Most user input is continuous. When you scroll on a webpage, anywhere from sixty to a few hundred events fire every second. Every time you move the page even a pixel, an entirely new event fires. And if you want your components to truly _hear everything_, you have to process all of them. Every handler in this package does just that. It reduces the event it receives into just a few, essential metrics. Then, it compares each metric to those of the event it just processed.
You've probably noticed that every handler in this package shares roughly the same method signature, and all return an object that contain common members, such as the `eventType` field. That's because every handler in this package extends the same, [generic function](./src/event-handlers/handler-utils/Handler.ts), and every returned object extends the same [generic returned object](./src/event-handlers/handler-utils/EventInfo.ts). This makes it easy to get a 'feel' for the functions in this package. Once you understand how one of them works, it's not a stretch to understand them all.
If you've been using [`handle(...)`](./src/DeviceInputEventHandlers.ts) function, rather than its more specific counterparts, it turns out that you've actually been using the specific counterparts the entire time! That's because all the [`handle(...)`](./src/DeviceInputEventHandlers.ts) function does is check the type of event it received and the type listener that sent it, and route the event to the function that knows how to handle that event. Of course, this means that the [`handle(...)`](./src/DeviceInputEventHandlers.ts) function has to wrap all of the other functions it calls, increasing the final bundle size of your project. But, it's a small tradeoff for the convenience.
## Package Folder Structure
| File or Folder | What it does: |
| :------------------------- | :----------------------------------------------------------------------------------------------- |
| [`src/*`](./src/README.md) | Exports all of the methods in this package. |
| `package.json` | Lists this package's dependencies, scripts, and exports. |
| `tsconfig.json` | Configures [Typescript](https://www.typescriptlang.org/tsconfig), which builds the code in `src` |
---
_Source: https://npm.io/package/@incremental.design/device-input-event-handlers · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
**Handle _every_ device input, without the boilerplate.**
The best user interfaces respond to _everything_ a user does: every mouse movement, touch, keypress, and even device motion. Over the past decade, browser APIs have connected to more devices: from mice and keyboards, to touchscreens, accelerometers, gamepads, and even webcams. However, responding to _all_ of these inputs takes a lot of logic. The more inputs your code responds to, the more logic it needs to contain, and the more bloated it becomes. `device-input-event-handlers` moves all of this logic out of your code, so you can handle everything, without the bloat.
Use the handlers in this package to:
- **Filter the useful information out of device input events, with just five lines of code:**
Feed an event into its corresponding handler in `device-input-event-handler` and get an object with just the values you _actually_ need to handle the event. For example:
- **Calculate changes between occurrences of device input events, with a single argument:**
Feed a handler an event, and the object it returned from any previous event, and it will automatically calculate the changes between the two. For example:
## Installation:
1. Add the `@incremental.design/device-input-event-handlers` package to your project: