The EventManager is capable of handling both native and custom events seamlessly, providing a robust solution for event management in complex applications.
npm install eventlistener-managerbash
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.