V 0.0.3 Changes:

* More types fixes - event options must be optional, package.json needs a reference to the `index.d.ts`
* changed the file structure
* the script needed more checks when removing listeners
* minor demo improvements

Author: thednp

demo/demo-component.js

@@ -12,21 +12,21 @@ class DemoComponent {
     compMap.set(this.element, this);
   }
   handleResize({ type }){
-    this.element.innerText = this.constructor.name + ' div#' + this.id + ', triggered: "' + type+ '", new Window size:' + window.innerWidth;
+    this.element.innerText = this.constructor.name + ' div#' + this.id + ',\ntriggered: "' + type + '",\nwindow.innerWidth:' + window.innerWidth;
   }
   /** @param {Event} e */
   handleClick(e){
-    const { target, type, pageX } = e;
+    const { target, type, pageX, pageY } = e;
     if (target && target.closest('button') !== null ) {
       e.preventDefault();
       e.stopImmediatePropagation();
     }
     console.log('"click" on `handleClick` should be `propagationStopped` if the target is a button, otherwise is only executes once and removes itself');
 
-    this.element.innerText = this.constructor.name + ' div#' + this.id + ', triggered: "' + type + '", pageX: ' + pageX;
+    this.element.innerText = this.constructor.name + ' div#' + this.id + ',\ntriggered: "' + type + '",\npageX: ' + pageX + ', pageY: ' + pageY;
   }
   handleScroll({ type }){
-    this.element.innerText = this.constructor.name + ' div#' + this.id + ', triggered: "' + type + '", scrollY: ' + window.scrollY;
+    this.element.innerText = this.constructor.name + ' div#' + this.id + ',\ntriggered: "' + type + '",\nscrollY: ' + window.scrollY;
   }
   _addListeners() {        
     EventListener.on(document, 'click', this.handleClick, { once: true });

dist/event-listener-es5.js

@@ -1,5 +1,5 @@
 /*!
-* EventListener v0.0.2 (https://github.com/thednp/event-listener.js)
+* EventListener v0.0.3 (https://github.com/thednp/event-listener.js)
 * Modern event listener for efficient applications.
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/event-listener.js/blob/master/LICENSE)
@@ -49,7 +49,7 @@
    * @param {Element | HTMLElement | Window | Document} element
    * @param {string} eventType
    * @param {EventListenerObject['handleEvent']} listener
-   * @param {AddEventListenerOptions} options
+   * @param {AddEventListenerOptions=} options
    */
   var addListener = function (element, eventType, listener, options) {
     // get element listeners first
@@ -84,21 +84,22 @@
    * @param {Element | HTMLElement | Window | Document} element
    * @param {string} eventType
    * @param {EventListenerObject['handleEvent']} listener
-   * @param {AddEventListenerOptions} options
+   * @param {AddEventListenerOptions=} options
    */
   var removeListener = function (element, eventType, listener, options) {
     // get listener first
     var oneEventMap = EventRegistry[eventType];
     var oneElementMap = oneEventMap && oneEventMap.get(element);
+    var savedOptions = oneElementMap && oneElementMap.get(listener);
     // also recover initial options
-    var ref = oneElementMap
-      ? oneElementMap.get(listener)
+    var ref = savedOptions !== undefined
+      ? savedOptions
       : { options: options };
     var eventOptions = ref.options;
 
     // unsubscribe second, remove from registry
     if (oneElementMap && oneElementMap.has(listener)) { oneElementMap.delete(listener); }
-    if (!oneElementMap || !oneElementMap.size) { oneEventMap.delete(element); }
+    if (oneEventMap && (!oneElementMap || !oneElementMap.size)) { oneEventMap.delete(element); }
     if (!oneEventMap || !oneEventMap.size) { delete EventRegistry[eventType]; }
 
     // remove listener last

dist/event-listener-es5.min.js

@@ -1,5 +1,5 @@
 /*!
-* EventListener v0.0.2 (https://github.com/thednp/event-listener.js)
+* EventListener v0.0.3 (https://github.com/thednp/event-listener.js)
 * Modern event listener for efficient applications.
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/event-listener.js/blob/master/LICENSE)
@@ -41,7 +41,7 @@ function globalListener(e) {
  * @param {Element | HTMLElement | Window | Document} element
  * @param {string} eventType
  * @param {EventListenerObject['handleEvent']} listener
- * @param {AddEventListenerOptions} options
+ * @param {AddEventListenerOptions=} options
  */
 const addListener = (element, eventType, listener, options) => {
   // get element listeners first
@@ -76,20 +76,21 @@ const addListener = (element, eventType, listener, options) => {
  * @param {Element | HTMLElement | Window | Document} element
  * @param {string} eventType
  * @param {EventListenerObject['handleEvent']} listener
- * @param {AddEventListenerOptions} options
+ * @param {AddEventListenerOptions=} options
  */
 const removeListener = (element, eventType, listener, options) => {
   // get listener first
   const oneEventMap = EventRegistry[eventType];
   const oneElementMap = oneEventMap && oneEventMap.get(element);
+  const savedOptions = oneElementMap && oneElementMap.get(listener);
   // also recover initial options
-  const { options: eventOptions } = oneElementMap
-    ? oneElementMap.get(listener)
+  const { options: eventOptions } = savedOptions !== undefined
+    ? savedOptions
     : { options };
 
   // unsubscribe second, remove from registry
   if (oneElementMap && oneElementMap.has(listener)) oneElementMap.delete(listener);
-  if (!oneElementMap || !oneElementMap.size) oneEventMap.delete(element);
+  if (oneEventMap && (!oneElementMap || !oneElementMap.size)) oneEventMap.delete(element);
   if (!oneEventMap || !oneEventMap.size) delete EventRegistry[eventType];
 
   // remove listener last

dist/event-listener.esm.js

@@ -1,5 +1,5 @@
 /*!
-* EventListener v0.0.2 (https://github.com/thednp/event-listener.js)
+* EventListener v0.0.3 (https://github.com/thednp/event-listener.js)
 * Modern event listener for efficient applications.
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/event-listener.js/blob/master/LICENSE)
@@ -47,7 +47,7 @@
    * @param {Element | HTMLElement | Window | Document} element
    * @param {string} eventType
    * @param {EventListenerObject['handleEvent']} listener
-   * @param {AddEventListenerOptions} options
+   * @param {AddEventListenerOptions=} options
    */
   const addListener = (element, eventType, listener, options) => {
     // get element listeners first
@@ -82,20 +82,21 @@
    * @param {Element | HTMLElement | Window | Document} element
    * @param {string} eventType
    * @param {EventListenerObject['handleEvent']} listener
-   * @param {AddEventListenerOptions} options
+   * @param {AddEventListenerOptions=} options
    */
   const removeListener = (element, eventType, listener, options) => {
     // get listener first
     const oneEventMap = EventRegistry[eventType];
     const oneElementMap = oneEventMap && oneEventMap.get(element);
+    const savedOptions = oneElementMap && oneElementMap.get(listener);
     // also recover initial options
-    const { options: eventOptions } = oneElementMap
-      ? oneElementMap.get(listener)
+    const { options: eventOptions } = savedOptions !== undefined
+      ? savedOptions
       : { options };
 
     // unsubscribe second, remove from registry
     if (oneElementMap && oneElementMap.has(listener)) oneElementMap.delete(listener);
-    if (!oneElementMap || !oneElementMap.size) oneEventMap.delete(element);
+    if (oneEventMap && (!oneElementMap || !oneElementMap.size)) oneEventMap.delete(element);
     if (!oneEventMap || !oneEventMap.size) delete EventRegistry[eventType];
 
     // remove listener last

dist/event-listener.esm.min.js

@@ -1,13 +1,14 @@
 {
   "name": "event-listener.js",
   "author": "thednp",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Modern event listener for efficient applications.",
   "license": "MIT",
   "homepage": "https://github.com/thednp/event-listener.js",
   "main": "dist/event-listener.min.js",
   "module": "dist/event-listener.esm.js",
   "jsnext": "src/index.js",
+  "types": "types/index.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/thednp/event-listener.js.git"

dist/event-listener.js

@@ -1,96 +1,5 @@
-/** @type {Record<string, any>} */
-const EventRegistry = {};
-
-/**
- * The global event listener.
- *
- * @this {Element | HTMLElement | Window | Document}
- * @param {Event} e
- * @returns {void}
- */
-function globalListener(e) {
-  const that = this;
-  const { type } = e;
-  const oneEvMap = EventRegistry[type] ? [...EventRegistry[type]] : [];
-
-  oneEvMap.forEach((elementsMap) => {
-    const [element, listenersMap] = elementsMap;
-    [...listenersMap].forEach((listenerMap) => {
-      if (element === that) {
-        const [listener, options] = listenerMap;
-        listener.apply(element, [e]);
-
-        if (options && options.once) {
-          removeListener(element, type, listener, options);
-        }
-      }
-    });
-  });
-}
-
-/**
- * Register a new listener with its options and attach the `globalListener`
- * to the target if this is the first listener.
- *
- * @param {Element | HTMLElement | Window | Document} element
- * @param {string} eventType
- * @param {EventListenerObject['handleEvent']} listener
- * @param {AddEventListenerOptions} options
- */
-const addListener = (element, eventType, listener, options) => {
-  // get element listeners first
-  if (!EventRegistry[eventType]) {
-    EventRegistry[eventType] = new Map();
-  }
-  const oneEventMap = EventRegistry[eventType];
-
-  if (!oneEventMap.has(element)) {
-    oneEventMap.set(element, new Map());
-  }
-  const oneElementMap = oneEventMap.get(element);
-
-  // get listeners size
-  const { size } = oneElementMap;
-
-  // register listener with its options
-  if (oneElementMap) {
-    oneElementMap.set(listener, options);
-  }
-
-  // add listener last
-  if (!size) {
-    element.addEventListener(eventType, globalListener, options);
-  }
-};
-
-/**
- * Remove a listener from registry and detach the `globalListener`
- * if no listeners are found in the registry.
- *
- * @param {Element | HTMLElement | Window | Document} element
- * @param {string} eventType
- * @param {EventListenerObject['handleEvent']} listener
- * @param {AddEventListenerOptions} options
- */
-const removeListener = (element, eventType, listener, options) => {
-  // get listener first
-  const oneEventMap = EventRegistry[eventType];
-  const oneElementMap = oneEventMap && oneEventMap.get(element);
-  // also recover initial options
-  const { options: eventOptions } = oneElementMap
-    ? oneElementMap.get(listener)
-    : { options };
-
-  // unsubscribe second, remove from registry
-  if (oneElementMap && oneElementMap.has(listener)) oneElementMap.delete(listener);
-  if (!oneElementMap || !oneElementMap.size) oneEventMap.delete(element);
-  if (!oneEventMap || !oneEventMap.size) delete EventRegistry[eventType];
-
-  // remove listener last
-  if (!oneElementMap || !oneElementMap.size) {
-    element.removeEventListener(eventType, globalListener, eventOptions);
-  }
-};
+import EventRegistry from './registry';
+import globalListener, { addListener, removeListener } from './globalListener';
 
 /**
  * Advanced event listener based on subscribe / publish pattern.

dist/event-listener.min.js

@@ -0,0 +1,93 @@
+import EventRegistry from './registry';
+
+/**
+ * The global event listener.
+ *
+ * @this {Element | HTMLElement | Window | Document}
+ * @param {Event} e
+ * @returns {void}
+ */
+export default function globalListener(e) {
+  const that = this;
+  const { type } = e;
+  const oneEvMap = EventRegistry[type] ? [...EventRegistry[type]] : [];
+
+  oneEvMap.forEach((elementsMap) => {
+    const [element, listenersMap] = elementsMap;
+    [...listenersMap].forEach((listenerMap) => {
+      if (element === that) {
+        const [listener, options] = listenerMap;
+        listener.apply(element, [e]);
+
+        if (options && options.once) {
+          removeListener(element, type, listener, options);
+        }
+      }
+    });
+  });
+}
+
+/**
+ * Register a new listener with its options and attach the `globalListener`
+ * to the target if this is the first listener.
+ *
+ * @param {Element | HTMLElement | Window | Document} element
+ * @param {string} eventType
+ * @param {EventListenerObject['handleEvent']} listener
+ * @param {AddEventListenerOptions=} options
+ */
+export const addListener = (element, eventType, listener, options) => {
+  // get element listeners first
+  if (!EventRegistry[eventType]) {
+    EventRegistry[eventType] = new Map();
+  }
+  const oneEventMap = EventRegistry[eventType];
+
+  if (!oneEventMap.has(element)) {
+    oneEventMap.set(element, new Map());
+  }
+  const oneElementMap = oneEventMap.get(element);
+
+  // get listeners size
+  const { size } = oneElementMap;
+
+  // register listener with its options
+  if (oneElementMap) {
+    oneElementMap.set(listener, options);
+  }
+
+  // add listener last
+  if (!size) {
+    element.addEventListener(eventType, globalListener, options);
+  }
+};
+
+/**
+ * Remove a listener from registry and detach the `globalListener`
+ * if no listeners are found in the registry.
+ *
+ * @param {Element | HTMLElement | Window | Document} element
+ * @param {string} eventType
+ * @param {EventListenerObject['handleEvent']} listener
+ * @param {AddEventListenerOptions=} options
+ */
+export const removeListener = (element, eventType, listener, options) => {
+  // get listener first
+  const oneEventMap = EventRegistry[eventType];
+  const oneElementMap = oneEventMap && oneEventMap.get(element);
+  const savedOptions = oneElementMap && oneElementMap.get(listener);
+  // also recover initial options
+  const { options: eventOptions } = savedOptions !== undefined
+    ? savedOptions
+    : { options };
+
+  // unsubscribe second, remove from registry
+  if (oneElementMap && oneElementMap.has(listener)) oneElementMap.delete(listener);
+  if (oneEventMap && (!oneElementMap || !oneElementMap.size)) oneEventMap.delete(element);
+  if (!oneEventMap || !oneEventMap.size) delete EventRegistry[eventType];
+
+  // remove listener last
+  if (!oneElementMap || !oneElementMap.size) {
+    element.removeEventListener(eventType, globalListener, eventOptions);
+  }
+};