eventlistener-manager
v1.0.45
Published
The EventManager is capable of handling both native and custom events seamlessly, providing a robust solution for event management in complex applications.
Downloads
112
Maintainers
Readme
Eventlistener Manager
Sample page
Link
Install
npm
npm i eventlistener-manager
cdn
<script src="https://unpkg.com/eventlistener-manager@latest/dist/index.umd.js"></script>
Report errors and suggestions
Gmail
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
EventManager.on(eventTarget, 'click', callback);
// or
eventTarget.on('click', callback);
Add multiple type event
EventManager.on(eventTarget, ['click', 'mousedown'], callback);
// or
eventTarget.on(['click', 'mousedown'], callback);
2. Remove event
Remove single type event
EventManager.off(eventTarget, 'click', callback);
// or
eventTarget.off('click', callback);
EventManager.off(eventTarget, 'click'); // remove all click event
// or
eventTarget.off('click');
EventManager.off(eventTarget); // remove all event
// or
eventTarget.off();
Remove multiple type event
EventManager.off(eventTarget, ['click', 'mousedown']); // remove all click, mousedown event
// or
eventTarget.off(['click', 'mousedown']);
3. Add custom event
EventManager.on(eventTarget, ['mouselongpressstart'], callback);
// or
eventTarget.on(['mouselongpressstart']);
Supported custom events
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.
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;
}
Options
Custom event options can be modified.
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
EventManager.on(eventTarget, 'fullscreenchange', callback);
// This actually works on firefox with specific version as follows: eventTarget.addEventListener('mozfullscreenchange', callback);
Additional Information
- 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.