fix(op_crates/web): define abort event handler on prototype (#8230)

1 files changed, 24 insertions, 19 deletions

diff --git a/op_crates/web/02_abort_signal.js b/op_crates/web/02_abort_signal.js
index a963b1807..53745c52b 100644
--- a/op_crates/web/02_abort_signal.js
+++ b/op_crates/web/02_abort_signal.js
@@ -36,24 +36,6 @@
         throw new TypeError("Illegal constructor.");
       }
       super();
-      // HTML specification section 8.1.5.1
-      let eventHandler = null;
-      Object.defineProperty(this, "onabort", {
-        get() {
-          return eventHandler;
-        },
-        set(value) {
-          if (eventHandler) {
-            this.removeEventListener("abort", eventHandler);
-          }
-          eventHandler = value;
-          if (typeof eventHandler === "function") {
-            this.addEventListener("abort", value);
-          }
-        },
-        configurable: true,
-        enumerable: true,
-      });
     }
 
     get aborted() {
@@ -64,7 +46,7 @@
       return "AbortSignal";
     }
   }
-
+  defineEventHandler(AbortSignal.prototype, "abort");
   class AbortController {
     #signal = new AbortSignal(illegalConstructorKey);
 
@@ -81,6 +63,29 @@
     }
   }
 
+  const handlerSymbol = Symbol("eventHandlers");
+  function defineEventHandler(emitter, name) {
+    // HTML specification section 8.1.5.1
+    Object.defineProperty(emitter, `on${name}`, {
+      get() {
+        return this[handlerSymbol]?.get(name);
+      },
+      set(value) {
+        const oldListener = this[handlerSymbol]?.get(name);
+        if (oldListener) {
+          this.removeEventListener(name, oldListener);
+        }
+        if (!this[handlerSymbol]) {
+          this[handlerSymbol] = new Map();
+        }
+        this.addEventListener(name, value);
+        this[handlerSymbol].set(value);
+      },
+      configurable: true,
+      enumerable: true,
+    });
+  }
+
   window.AbortSignal = AbortSignal;
   window.AbortController = AbortController;
   window.__bootstrap = window.__bootstrap || {};