npm
npm i eventlistener-managercdn
<script src="https://unpkg.com/eventlistener-manager@latest/dist/index.umd.js"></script>| 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 |
EventManager.on(eventTarget, 'click', callback);
// or
eventTarget.on('click', callback);EventManager.on(eventTarget, ['click', 'mousedown'], callback);
// or
eventTarget.on(['click', 'mousedown'], callback);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();EventManager.off(eventTarget, ['click', 'mousedown']); // remove all click, mousedown event
// or
eventTarget.off(['click', 'mousedown']);EventManager.on(eventTarget, ['mouselongpressstart'], callback);
// or
eventTarget.on(['mouselongpressstart']);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;
}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 addedEventManager.on(eventTarget, 'fullscreenchange', callback);
// This actually works on firefox with specific version as follows: eventTarget.addEventListener('mozfullscreenchange', callback);- The EventManager supports polyfills for various event types to ensure cross-browser compatibility.
- The
strictmode 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.