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.