Gathering detailed insights and metrics for @thednp/event-listener
Gathering detailed insights and metrics for @thednp/event-listener
🚅 Modern event listener for efficient applications based on the subscribe-publish pattern.
npm install @thednp/event-listener
Typescript
Module System
Min. Node Version
Node Version
NPM Version
99.7
Supply Chain
100
Quality
79.2
Maintenance
100
Vulnerability
100
License
TypeScript (100%)
Love this project? Help keep it running — sponsor us today! 🚀
Total Downloads
11,535,503
Last Day
7,898
Last Week
309,774
Last Month
1,172,731
Last Year
10,373,256
MIT License
2 Stars
103 Commits
5 Watchers
1 Branches
1 Contributors
Updated on Nov 24, 2024
Minified
Minified + Gzipped
Latest Version
2.0.8
Package Id
@thednp/event-listener@2.0.8
Unpacked Size
41.25 kB
Size
9.52 kB
File Count
12
NPM Version
10.8.1
Node Version
20.16.0
Published on
Oct 30, 2024
Cumulative downloads
Total Downloads
Last Day
8%
7,898
Compared to previous day
Last Week
4.5%
309,774
Compared to previous week
Last Month
42.4%
1,172,731
Compared to previous month
Last Year
809.2%
10,373,256
Compared to previous year
A TypeScript sourced event listener for efficient applications based on the subscribe-publish pattern, around 700 bytes when minified and packs a surprising amount of power.
globalListener
to call them all at once when event is triggered;once
, meaning that when the option is true
, the listener is automatically un-subscribed and detached from target;1pnpm install -D @thednp/event-listener
1yarn add -D @thednp/event-listener
1npm install -D @thednp/event-listener
1deno install -D npm:@thednp/event-listener@latest
1<script src="https://cdn.jsdelivr.net/npm/@thednp/event-listener/dist/event-listener.js"></script>
1import * as Listener from '@thednp/event-listener'; 2 3// execute a listener once 4Listener.on(document, 'DOMContentLoaded', () => { 5 console.log('document is now loaded'); 6 }, 7 { once: true }, 8); 9 10// add a listener with `useCapture: false` 11function handleMyClick(e: Listener.NativeEvent) { 12 if (e.target.tagName === 'button') { 13 e.preventDefault(); 14 e.stopImmediatePropagation(); 15 } 16 console.log('do something else instead'); 17} 18Listener.on(document, 'click', handleMyClick, false); 19 20// remove a listener, `EventListener` will get listener options from registry 21Listener.off(document, 'click', handleMyClick); 22 23// add listener to `window`, this listener has no name and cannot be removed 24Listener.on(window, 'scroll', () => console.log(window.scrollY));
Since we're implementing Map
, you can make use of its prototype to access registry:
1// get element listener registry 2const documentClickListeners = Listener.registry['click'].get(document); 3 4// returns 5Map(1) { 6 Entries => [ 7 0: { 8 key: handleMyClick() // listener 9 value: false // listener options 10 } 11 ], 12 size: 1, // size of the Map 13 prototype: [Prototype(Map)] 14} 15 16// check if element has listener 17if (documentClickListeners && documentClickListeners.has(handleMyClick)) { 18 // do something about it 19} 20 21// check if a listener is the one you're looking for 22if (documentClickListeners) { 23 const [eventListener] = documentClickListeners; 24 if (eventListener === handleMyClick) { 25 // do something about it 26 } 27} 28 29// get listener options 30const myListenerOptions = documentClickListeners && documentClickListeners.get(handleMyClick); 31 32// returns false, which is the `useCapture` option value added for `handleMyClick`
You can also make use of the types for more consistent code:
1import { on, FocusEventHandler } from '@thednp/event-listener'; 2 3const handleMyFocus: FocusEventHandler<HTMLInputElement> = (e) => { 4 console.log(e) 5} 6 7const myInput = document.querySelector('input') || document.createElement('input'); 8on(myInput, 'focus', handleMyFocus);
For more advanced use, check out the demo, showcasing the EventListener usage with a demo component.
npm install
or npm update
, takes a few minutes to download the Electron browser;npm run test-ui
to open the browser mode testing OR npm run test
to run the tests in headless mode.EventListener is released under the MIT License.
No vulnerabilities found.
No security vulnerabilities found.