Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@thednp/event-listener
Advanced tools
Readme
A TypeScript sourced event listener for efficient applications based on the subscribe-publish pattern, less than 900 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;npm i @thednp/event-listener
<script src="https://cdn.jsdelivr.net/npm/@thednp/event-listener/dist/event-listener.js"></script>
import * as Listener from '@thednp/event-listener';
// execute a listener once
Listener.on(document, 'DOMContentLoaded', () => {
console.log('document is now loaded');
},
{ once: true },
);
// add a listener with `useCapture: false`
function handleMyClick(e: Listener.NativeEvent) {
if (e.target.tagName === 'button') {
e.preventDefault();
e.stopImmediatePropagation();
}
console.log('do something else instead');
}
Listener.on(document, 'click', handleMyClick, false);
// remove a listener, `EventListener` will get listener options from registry
Listener.off(document, 'click', handleMyClick);
// add listener to `window`, this listener has no name and cannot be removed
Listener.on(window, 'scroll', () => console.log(window.scrollY));
Since we're implementing Map
, you can make use of its prototype to access registry:
// get element listener registry
const documentClickListeners = Listener.registry['click'].get(document);
// returns
Map(1) {
Entries(Array) => [
0: {
key: handleMyClick() // listener
value: false // listener options
}
],
size: 1, // size of the Map
prototype: [Prototype(Object)]
}
// check if element has listener
if (documentClickListeners && documentClickListeners.has(handleMyClick)) {
// do something about it
}
// check if a listener is the one you're looking for
if (documentClickListeners) {
const [eventListener] = documentClickListeners;
if (eventListener === handleMyClick) {
// do something about it
}
}
// get listener options
const myListenerOptions = documentClickListeners && documentClickListeners.get(handleMyClick);
// returns false, which is the `useCapture` option value added for `handleMyClick`
You can also make use of the types for more consistent code:
import { on, FocusEventHandler } from '@thednp/event-listener';
const handleMyFocus: FocusEventHandler<HTMLInputElement> = (e) => {
console.log(e)
}
const myInput = document.querySelector('input') || document.createElement('input');
on(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 cypress
to open the Cypress console OR npm run test
to run the tests in headless mode.EventListener is released under the MIT License.
FAQs
Modern event listener for efficient web applications based on subscribe-publish pattern.
The npm package @thednp/event-listener receives a total of 128,498 weekly downloads. As such, @thednp/event-listener popularity was classified as popular.
We found that @thednp/event-listener demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.