fix(core events): Fix references in add_event_listener and remove_event_listener.

add_event_listener and remove_event_listener did incorrectly use an
object instead of a map to store element references. This is now fixed.

Author: thet

src/core/events.js

@@ -3,7 +3,7 @@
 // Event listener registration for easy-to-remove event listeners.
 // once Safari supports the ``signal`` option for addEventListener we can abort
 // event handlers by calling AbortController.abort().
-export const event_listener_map = {};
+export const event_listener_map = new Map();
 
 /**
  * Add an event listener to a DOM element under a unique id.
@@ -23,19 +23,21 @@ const add_event_listener = (el, event_type, id, cb, opts = {}) => {
     remove_event_listener(el, id); // do not register one listener twice.
 
     // Create event_listener_map entry if not existent.
-    if (!event_listener_map[el]) {
-        event_listener_map[el] = {};
+    if (!event_listener_map.has(el)) {
+        event_listener_map.set(el, new Map());
     }
     let _cb = cb;
     if (opts?.once === true) {
         // For `once` events, also remove the entry from the event_listener_map.
         _cb = (e) => {
-            delete event_listener_map[el][id];
+            event_listener_map.get(el)?.delete(id);
             cb(e);
         };
     }
     // Only `capture` option is necessary for `removeEventListener`.
-    event_listener_map[el][id] = [event_type, _cb, opts.capture ? opts : undefined];
+    event_listener_map
+        .get(el)
+        .set(id, [event_type, _cb, opts.capture ? opts : undefined]);
     el.addEventListener(event_type, _cb, opts);
 };
 
@@ -50,26 +52,26 @@ const remove_event_listener = (el, id) => {
     if (!el?.removeEventListener) {
         return; // nothing to do.
     }
-    const el_events = event_listener_map[el];
+    const el_events = event_listener_map.get(el);
     if (!el_events) {
         return;
     }
     let entries;
     if (id) {
         // remove event listener with specific id
-        const entry = el_events[id];
+        const entry = el_events.get(id);
         entries = entry ? [[id, entry]] : [];
     } else {
         // remove all event listeners of element
-        entries = Object.entries(el_events);
+        entries = el_events.entries();
     }
     for (const entry of entries || []) {
         el.removeEventListener(entry[1][0], entry[1][1], entry[1][2]);
         // Delete entry from event_listener_map
-        delete event_listener_map[el][entry[0]];
+        event_listener_map.get(el).delete(entry[0]);
         // Delete element from event_listener_map if no more events are registered.
-        if (!Object.keys(event_listener_map[el]).length) {
-            delete event_listener_map[el];
+        if (!event_listener_map.get(el).size) {
+            event_listener_map.delete(el);
         }
     }
 };

src/core/events.test.js

@@ -7,9 +7,7 @@ describe("core.events tests", () => {
     describe("1 - add / remove event listener", () => {
         afterEach(() => {
             // Clear event_listener_map after each test.
-            for (const el in event_listener_map) {
-                delete event_listener_map[el];
-            }
+            event_listener_map.clear();
         });
 
         it("Registers events only once and unregisters events.", (done) => {
@@ -66,10 +64,10 @@ describe("core.events tests", () => {
                 once: true,
             });
 
-            expect(event_listener_map[el].test_once_event).toBeDefined();
+            expect(event_listener_map.get(el).get("test_once_event")).toBeDefined();
             el.dispatchEvent(new Event("test"));
 
-            expect(event_listener_map[el].test_once_event).not.toBeDefined();
+            expect(event_listener_map.get(el).get("test_once_event")).not.toBeDefined();
         });
 
         it("Removes a specific event listener.", () => {
@@ -79,7 +77,7 @@ describe("core.events tests", () => {
 
             // register the once-event handler
             events.add_event_listener(el, "test", "test_event", () => cnt++);
-            expect(event_listener_map[el].test_event).toBeDefined();
+            expect(event_listener_map.get(el).get("test_event")).toBeDefined();
 
             el.dispatchEvent(new Event("test"));
             expect(cnt).toBe(1);
@@ -90,9 +88,9 @@ describe("core.events tests", () => {
             events.remove_event_listener(el, "test_event");
 
             // Now the event listener should be removed.
-            expect(event_listener_map[el]?.test_once_event).not.toBeDefined();
+            expect(event_listener_map.get(el)?.get("test_once_event")).not.toBeDefined();
             // Even the element itself should be removed, if there are no more event listeners on it.
-            expect(event_listener_map[el]).not.toBeDefined();
+            expect(event_listener_map.get("el")).not.toBeDefined();
 
             // counter should not increase anymore
             el.dispatchEvent(new Event("test"));
@@ -101,7 +99,7 @@ describe("core.events tests", () => {
 
         it("Remove single and all event listeners from an element, not touching others.", () => {
             const el1 = document.createElement("div");
-            const el2 = document.createElement("span");
+            const el2 = document.createElement("div");
 
             let cnt1 = 0;
             let cnt2 = 0;
@@ -117,12 +115,12 @@ describe("core.events tests", () => {
             events.add_event_listener(el1, "test3", "test_event_3", () => cnt2++);
             events.add_event_listener(el2, "test4", "test_event_4", () => cnt3++);
 
-            expect(event_listener_map[el1].test_event_1).toBeDefined();
-            expect(event_listener_map[el1].test_event_2).toBeDefined();
-            expect(event_listener_map[el1].test_event_3).toBeDefined();
-            expect(event_listener_map[el2].test_event_4).toBeDefined();
+            expect(event_listener_map.get(el1).get("test_event_1")).toBeDefined();
+            expect(event_listener_map.get(el1).get("test_event_2")).toBeDefined();
+            expect(event_listener_map.get(el1).get("test_event_3")).toBeDefined();
+            expect(event_listener_map.get(el2).get("test_event_4")).toBeDefined();
 
-            expect(Object.keys(event_listener_map).length).toBe(2);
+            expect(event_listener_map.size).toBe(2);
 
             el1.dispatchEvent(new Event("test1"));
             expect(cnt1).toBe(1);
@@ -151,11 +149,11 @@ describe("core.events tests", () => {
 
             // Remove only test_event_1
             events.remove_event_listener(el1, "test_event_1");
-            expect(event_listener_map[el1].test_event_1).not.toBeDefined();
-            expect(event_listener_map[el1].test_event_2).toBeDefined();
-            expect(event_listener_map[el1].test_event_3).toBeDefined();
-            expect(event_listener_map[el2].test_event_4).toBeDefined();
-            expect(Object.keys(event_listener_map).length).toBe(2);
+            expect(event_listener_map.get(el1).get("test_event_1")).not.toBeDefined();
+            expect(event_listener_map.get(el1).get("test_event_2")).toBeDefined();
+            expect(event_listener_map.get(el1).get("test_event_3")).toBeDefined();
+            expect(event_listener_map.get(el2).get("test_event_4")).toBeDefined();
+            expect(event_listener_map.size).toBe(2);
 
             // Counter should not increase anymore on event "test1"
             el1.dispatchEvent(new Event("test1"));
@@ -173,8 +171,8 @@ describe("core.events tests", () => {
 
             // Remove all event handler on el1
             events.remove_event_listener(el1);
-            expect(event_listener_map[el1]).not.toBeDefined();
-            expect(Object.keys(event_listener_map).length).toBe(1);
+            expect(event_listener_map.get(el1)).not.toBeDefined();
+            expect(event_listener_map.size).toBe(1);
 
             // Counter should not increase anymore on el1
             el1.dispatchEvent(new Event("test1"));