Eventlistener Manager

!NPM

!NPM Downloads
!GitHub Repo stars

!Static Badge

Sample page

$3

Install

npm
``bash
npm i eventlistener-manager
`
cdn
`html

`

Report errors and suggestions

$3

Change log

| Version | Log |
|---------|----------------------------------------------------------------------------------------------------------------------|
| 1.0.25 | Support CDN |
| 1.0.27 | Add 'appearancechange', 'orientationchange', 'resize', 'intersectionchange' eventlistener |
| 1.0.32 | Polyfill 'addEventlistener', 'removeEventlistener', 'dispatchEvent', 'requestAnimationFrame', 'cancelAnimationFrame' |
| 1.0.33 | Polyfill 'WeakMap' |
| 1.0.34 | Fix 'requestAnimationFrame', 'cancelAnimationFrame' polyfill error |
| 1.0.37 | Polyfill 'matchMedia' |
| 1.0.45 | Improve situations where Custom events are not released in special cases |

1. Add events

#### Add single type event
`typescript
EventManager.on(eventTarget, 'click', callback);
// or
eventTarget.on('click', callback);
`
#### Add multiple type event
`typescript
EventManager.on(eventTarget, ['click', 'mousedown'], callback);
// or
eventTarget.on(['click', 'mousedown'], callback);
`

2. Remove event

#### Remove single type event
`typescript
EventManager.off(eventTarget, 'click', callback);
// or
eventTarget.off('click', callback);
`
`typescript
EventManager.off(eventTarget, 'click'); // remove all click event
// or
eventTarget.off('click');
`
`typescript
EventManager.off(eventTarget); // remove all event
// or
eventTarget.off();
`
#### Remove multiple type event
`typescript
EventManager.off(eventTarget, ['click', 'mousedown']); // remove all click, mousedown event
// or
eventTarget.off(['click', 'mousedown']);
`

3. Add custom event

`typescript
EventManager.on(eventTarget, ['mouselongpressstart'], callback);
// or
eventTarget.on(['mouselongpressstart']);
`

$3

Supported custom events include mouse long press, mouse pan, touch long press, touch pan, touch pinch, screen mode change, orientation change, any element resize, and any element intersection change.
`typescript
interface ExtendedMouseEventMap {
'mouselongpressstart': MouseEvent;
'mouselongpressmove': MouseEvent;
'mouselongpressend': MouseEvent;
'mouselongpressleave': MouseEvent;

'mousepanstart': MouseEvent;
'mousepanmove': MouseEvent;
'mousepanleft': MouseEvent;
'mousepanright': MouseEvent;
'mousepanup': MouseEvent;
'mousepandown': MouseEvent;
'mousepanend': MouseEvent;
'mousepanleave': MouseEvent;
}

interface ExtendedTouchEventMap {
'touchlongpressstart': TouchEvent;
'touchlongpressmove': TouchEvent;
'touchlongpressend': TouchEvent;
'touchlongpresscancel': TouchEvent;

'touchpanstart': TouchEvent;
'touchpanmove': TouchEvent;
'touchpanleft': TouchEvent;
'touchpanright': TouchEvent;
'touchpanup': TouchEvent;
'touchpandown': TouchEvent;
'touchpanend': TouchEvent;
'touchpancancel': TouchEvent;

'touchpinchstart': TouchEvent;
'touchpinchmove': TouchEvent;
'touchpinchend': TouchEvent;
'touchpinchcancel': TouchEvent;
}

interface ExtendedUIEventMap {
'appearancechange': MediaQueryListEvent;
'orientationchange': MediaQueryListEvent;
'resize': UIEvent;
'intersectionchange': UIEvent;
}
`


$3

Custom event options can be modified.

`typescript
import {EventManager} from "./index";

EventManager.options.strict = true; // Use strict callback mode
EventManager.options.mouseLongpressTimeRequired = 750; // Mouse long press time required
EventManager.options.mouseLongpressBelowDistance = 15; // Mouse long press below distance
EventManager.options.touchLongpressTimeRequired = 750; // Touch long press time required
EventManager.options.touchLongpressBelowDistance = 30; // Touch long press below distance
EventManager.options.callWhenAddedUIEvent = true; // Call callback when extended ui event added
`


4. Support event type polyfill


`typescript
EventManager.on(eventTarget, 'fullscreenchange', callback);

// This actually works on firefox with specific version as follows: eventTarget.addEventListener('mozfullscreenchange', callback);
`


$3


- The EventManager supports polyfills for various event types to ensure cross-browser compatibility.
- The strict` mode in options ensures that the callback is invoked in a strict manner according to the specified requirements.
- The EventManager is capable of handling both native and custom events seamlessly, providing a robust solution for event management in complex applications.