feat(core events): remove_event_listener - support removal by id and all at once.

Previously registered events can now be removed by a matching id with no
element given, like:
remove_event_listener(undefined, "my-event-id");
When called with no parameters like "remove_event_listener()" all
registered events are removed.

Author: thet

src/core/events.js

@@ -44,34 +44,43 @@ const add_event_listener = (el, event_type, id, cb, opts = {}) => {
 /**
  * Remove an event listener from a DOM element under a unique id.
  *
- * @param {DOM Node} el - The element to register the event for.
- * @param {string} id - A unique id under which the event is registered.
+ * If an element and id are given, the event listeners for the given element matching the id are removed.
+ * If an element but no id is given, all event listeners for that element are removed.
+ * If an id but no element is given, all event listeners for any element matching the id are removed.
+ * If no element and no id are given, all event listeners are removed.
+ *
+ * @param {DOM Node} [el] - The element to register the event for.
+ * @param {string} [id] - A unique id under which the event is registered.
  *
  */
 const remove_event_listener = (el, id) => {
-    if (!el?.removeEventListener) {
-        return; // nothing to do.
-    }
-    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.get(id);
-        entries = entry ? [[id, entry]] : [];
-    } else {
-        // remove all event listeners of element
-        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
-        event_listener_map.get(el).delete(entry[0]);
-        // Delete element from event_listener_map if no more events are registered.
-        if (!event_listener_map.get(el).size) {
-            event_listener_map.delete(el);
+    const els = el ? [el] : event_listener_map.keys();
+    for (const el of els) {
+        if (!el?.removeEventListener) {
+            return; // nothing to do.
+        }
+        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.get(id);
+            entries = entry ? [[id, entry]] : [];
+        } else {
+            // remove all event listeners of element
+            entries = el_events.entries();
+        }
+        for (const entry of entries || []) {
+            // Remove event listener
+            el.removeEventListener(entry[1][0], entry[1][1], entry[1][2]);
+            // Delete entry from event_listener_map
+            event_listener_map.get(el).delete(entry[0]);
+            // Delete element from event_listener_map if no more events are registered.
+            if (!event_listener_map.get(el).size) {
+                event_listener_map.delete(el);
+            }
         }
     }
 };

src/core/events.test.js

@@ -169,7 +169,7 @@ describe("core.events tests", () => {
             expect(cnt2).toBe(2);
             expect(cnt3).toBe(2);
 
-            // Remove all event handler on el1
+            // Remove all event handlers on el1
             events.remove_event_listener(el1);
             expect(event_listener_map.get(el1)).not.toBeDefined();
             expect(event_listener_map.size).toBe(1);
@@ -188,6 +188,121 @@ describe("core.events tests", () => {
             expect(cnt2).toBe(2);
             expect(cnt3).toBe(3);
         });
+
+        it("Remove all events matching exactly an id from any element.", () => {
+            const el1 = document.createElement("div");
+            const el2 = document.createElement("div");
+
+            let cnt1 = 0;
+            let cnt2 = 0;
+            let cnt3 = 0;
+
+            const shared_cb = () => {
+                cnt1++;
+            };
+
+            // register the event handlers
+            events.add_event_listener(el1, "test1", "test_event_1", shared_cb);
+            events.add_event_listener(el1, "test2", "test_event_2", shared_cb);
+            events.add_event_listener(el1, "test3", "test_event_3", () => cnt2++);
+            events.add_event_listener(el2, "test4", "test_event_4", () => cnt3++);
+
+            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(event_listener_map.size).toBe(2);
+
+            el1.dispatchEvent(new Event("test1"));
+            expect(cnt1).toBe(1);
+            expect(cnt2).toBe(0);
+            expect(cnt3).toBe(0);
+
+            el1.dispatchEvent(new Event("test1"));
+            expect(cnt1).toBe(2);
+            expect(cnt2).toBe(0);
+            expect(cnt3).toBe(0);
+
+            el1.dispatchEvent(new Event("test2"));
+            expect(cnt1).toBe(3);
+            expect(cnt2).toBe(0);
+            expect(cnt3).toBe(0);
+
+            el1.dispatchEvent(new Event("test3"));
+            expect(cnt1).toBe(3);
+            expect(cnt2).toBe(1);
+            expect(cnt3).toBe(0);
+
+            el2.dispatchEvent(new Event("test4"));
+            expect(cnt1).toBe(3);
+            expect(cnt2).toBe(1);
+            expect(cnt3).toBe(1);
+
+            // Remove only test_event_1
+            events.remove_event_listener(undefined, "test_event_1");
+            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"));
+            expect(cnt1).toBe(3);
+            expect(cnt2).toBe(1);
+            expect(cnt3).toBe(1);
+
+            // Rest should not be affected.
+            el1.dispatchEvent(new Event("test2"));
+            el1.dispatchEvent(new Event("test3"));
+            el2.dispatchEvent(new Event("test4"));
+            expect(cnt1).toBe(4);
+            expect(cnt2).toBe(2);
+            expect(cnt3).toBe(2);
+
+            // Remove rest of event handlers on el1
+            events.remove_event_listener(undefined, "test_event_2");
+            events.remove_event_listener(undefined, "test_event_3");
+            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"));
+            el1.dispatchEvent(new Event("test2"));
+            el1.dispatchEvent(new Event("test3"));
+            expect(cnt1).toBe(4);
+            expect(cnt2).toBe(2);
+            expect(cnt3).toBe(2);
+
+            // But el2 should still work.
+            el2.dispatchEvent(new Event("test4"));
+            expect(cnt1).toBe(4);
+            expect(cnt2).toBe(2);
+            expect(cnt3).toBe(3);
+        });
+
+        it("Remove all event listeners at once.", () => {
+            const el1 = document.createElement("div");
+            const el2 = document.createElement("div");
+
+            // register the event handlers
+            events.add_event_listener(el1, "test1", "test_event_1", () => {});
+            events.add_event_listener(el1, "test2", "test_event_2", () => {});
+            events.add_event_listener(el1, "test3", "test_event_3", () => {});
+            events.add_event_listener(el2, "test4", "test_event_4", () => {});
+
+            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(event_listener_map.size).toBe(2);
+
+            // Remove all event listeners
+            events.remove_event_listener();
+            expect(event_listener_map.size).toBe(0);
+        });
     });
 
     describe("2 - await pattern initialization", () => {