Modern event listener for efficient web applications based on subscribe-publish pattern. 

thednp

@thednp/event-listener

  "description": "Modern event listener for efficient web applications based on subscribe-publish pattern.",

  "homepage": "https://thednp.github.io/event-listener",

      "types": "./dist/event-listener.d.ts",

      "require": "./dist/event-listener.cjs",

      "import": "./dist/event-listener.mjs"

    "url": "git+https://github.com/thednp/event-listener.git"

    "url": "https://github.com/thednp/event-listener/issues"

    "registry": "https://registry.npmjs.org/"

    "pre-test": "npm run clean-coverage",

    "test": "npm run pre-test && cypress run",

    "clean-coverage": "rimraf coverage .nyc_output",

    "cypress": "npm run pre-test && npx cypress open",

    "coverage:report": "nyc report --reporter=lcov --reporter=json --reporter=text --reporter=json-summary",

    "format": "prettier --write \"src/**/*.ts\"",

    "lint:ts": "eslint -c .eslintrc.cjs --ext .ts src",

    "fix:ts": "eslint -c .eslintrc.cjs --ext .ts src --fix",

    "dts": "dts-bundle-generator --config ./dts.config.ts",

    "build": "npm run lint:ts && vite build && npm run docs && npm run dts",

    "docs": "ncp dist/event-listener.js docs/event-listener.js && ncp dist/event-listener.js.map docs/event-listener.js.map"

    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",

    "@types/istanbul-lib-instrument": "^1.7.4",

    "@typescript-eslint/eslint-plugin": "^5.59.9",

    "@typescript-eslint/parser": "^5.59.9",

    "@typescript-eslint/eslint-plugin": "^5.61.0",

    "@typescript-eslint/parser": "^5.61.0",

    "eslint-plugin-prefer-arrow": "^1.2.3",

[![Coverage Status](https://coveralls.io/repos/github/thednp/event-listener/badge.svg)](https://coveralls.io/github/thednp/event-listener)

[![ci](https://github.com/thednp/event-listener/actions/workflows/ci.yml/badge.svg)](https://github.com/thednp/event-listener/actions/workflows/ci.yml)

[![NPM Version](https://img.shields.io/npm/v/@thednp/event-listener.svg)](https://www.npmjs.com/package/@thednp/event-listener)

[![NPM Downloads](https://img.shields.io/npm/dm/@thednp/event-listener.svg)](http://npm-stat.com/charts.html?package=@thednp/event-listener)

[![jsDeliver](https://img.shields.io/jsdelivr/npm/hw/@thednp/event-listener)](https://www.jsdelivr.com/package/npm/@thednp/event-listener)

[![cypress version](https://img.shields.io/badge/cypress-12.14.0-brightgreen)](https://cypress.io/)

[![typescript version](https://img.shields.io/badge/typescript-5.1.3-brightgreen)](https://www.typescriptlang.org/)

[![eslint version](https://img.shields.io/badge/eslint-8.42.0-brightgreen)](https://github.com/eslint)

[![cypress version](https://img.shields.io/badge/cypress-12.16.0-brightgreen)](https://cypress.io/)

[![typescript version](https://img.shields.io/badge/typescript-5.1.6-brightgreen)](https://www.typescriptlang.org/)

[![eslint version](https://img.shields.io/badge/eslint-8.44.0-brightgreen)](https://github.com/eslint)

[![vite version](https://img.shields.io/badge/vite-4.3.9-brightgreen)](https://github.com/vitejs)

[![prettier version](https://img.shields.io/badge/prettier-2.8.8-brightgreen)](https://prettier.io/)

A TypeScript sourced event listener for efficient applications based on the [subscribe-publish](https://hackernoon.com/do-you-still-register-window-event-listeners-in-each-component-react-in-example-31a4b1f6f1c8) pattern, less than 900 bytes when minified and packs a surprising amount of power.

- **EventListener** is TypeScript sourced;

- **EventListener** makes use of the native [Map](https://caniuse.com/mdn-javascript_builtins_map) to subscribe/register or unsubscribe/remove listeners, which is perfect since we need to make sure the exact listeners are added/removed; this completely invalidates the need to [deconstruct function objects](https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript) for comparison's sake to make sure event listeners are properly handled;

- **EventListener** allows you to register multiple listeners for the same target, even of the same type, but always uses a single `globalListener` to call them all at once when event is triggered;

- **EventListener** "should" be able to manage event options, especially `once`, meaning that when the option is `true`, the listener is automatically un-subscribed and detached from target;

- **EventListener** will unsubscribe and detach listeners with the same options used when attached, which means you can "lazy" remove listeners on the fly.

import * as Listener from '@thednp/event-listener';

Listener.on(document, 'DOMContentLoaded', () => {

    console.log('document is now loaded');

// add a listener with `useCapture: false`

  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:

const documentClickListeners = Listener.registry['click'].get(document);

if (documentClickListeners && documentClickListeners.has(handleMyClick)) {

// check if a listener is the one you're looking for

  const [eventListener] = documentClickListeners;

const myListenerOptions = documentClickListeners && documentClickListeners.get(handleMyClick);

// returns false, which is the `useCapture` option value added for `handleMyClick`

You can also make use of "tree shaking" to import only the module you want, for instance:

import { on } from '@thednp/event-listener';

		{
		"name": "@thednp/event-listener",
		"author": "thednp",
		"version": "2.0.1",
		"version": "2.0.2",
		"description": "Modern event listener for efficient web applications based on subscribe-publish pattern.",
		@@ -11,5 +11,5 @@ "license": "MIT",
		"module": "./dist/event-listener.mjs",
		"types": "./dist/event-listener.d.ts",
		"exports": {
		".": {
		"types": "./dist/event-listener.d.ts",
		"require": "./dist/event-listener.cjs",
		@@ -55,10 +55,10 @@ "import": "./dist/event-listener.mjs"
		"@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
		"@cypress/code-coverage": "^3.10.7",
		"@cypress/code-coverage": "^3.10.8",
		"@types/istanbul-lib-instrument": "^1.7.4",
		"@typescript-eslint/eslint-plugin": "^5.59.9",
		"@typescript-eslint/parser": "^5.59.9",
		"cypress": "^12.14.0",
		"@typescript-eslint/eslint-plugin": "^5.61.0",
		"@typescript-eslint/parser": "^5.61.0",
		"cypress": "^12.16.0",
		"dts-bundle-generator": "^8.0.1",
		"eslint": "^8.42.0",
		"eslint-plugin-jsdoc": "^46.2.6",
		"eslint": "^8.44.0",
		"eslint-plugin-jsdoc": "^46.4.3",
		"eslint-plugin-prefer-arrow": "^1.2.3",
		@@ -72,5 +72,5 @@ "eslint-plugin-prettier": "^4.2.1",
		"rimraf": "^5.0.1",
		"typescript": "^5.1.3",
		"typescript": "^5.1.6",
		"vite": "^4.3.9"
		}
		}

		@@ -8,5 +8,5 @@ ## EventListener
		[![jsDeliver](https://img.shields.io/jsdelivr/npm/hw/@thednp/event-listener)](https://www.jsdelivr.com/package/npm/@thednp/event-listener)
		[![cypress version](https://img.shields.io/badge/cypress-12.14.0-brightgreen)](https://cypress.io/)
		[![typescript version](https://img.shields.io/badge/typescript-5.1.3-brightgreen)](https://www.typescriptlang.org/)
		[![eslint version](https://img.shields.io/badge/eslint-8.42.0-brightgreen)](https://github.com/eslint)
		[![cypress version](https://img.shields.io/badge/cypress-12.16.0-brightgreen)](https://cypress.io/)
		[![typescript version](https://img.shields.io/badge/typescript-5.1.6-brightgreen)](https://www.typescriptlang.org/)
		[![eslint version](https://img.shields.io/badge/eslint-8.44.0-brightgreen)](https://github.com/eslint)
		[![vite version](https://img.shields.io/badge/vite-4.3.9-brightgreen)](https://github.com/vitejs)
		@@ -13,0 +13,0 @@ [![prettier version](https://img.shields.io/badge/prettier-2.8.8-brightgreen)](https://prettier.io/)

Improved metrics