[Refactor] Prefer event listeners to callback props (#637)

N.B.: `onerror` replacement is not a `window` or `Element` instance.

eslint.config.js

@@ -63,7 +63,6 @@ export default tseslint.config(
       "unicorn/no-this-assignment": "off",
       "unicorn/no-useless-switch-case": "off",
       "unicorn/no-zero-fractions": "off",
-      "unicorn/prefer-add-event-listener": "off",
       "unicorn/prefer-blob-reading-methods": "off",
       "unicorn/prefer-default-parameters": "off",
       "unicorn/prefer-math-min-max": "off",

src/LGraph.ts

@@ -1713,8 +1713,8 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
       that.configure(data)
       callback?.()
     })
-    req.onerror = function (err) {
+    req.addEventListener("error", (err) => {
       console.error("Error loading graph:", err)
-    }
+    })
   }
 }

src/LGraphCanvas.ts

@@ -3592,10 +3592,10 @@ export class LGraphCanvas implements ConnectionColorContext {
           if (node.onDropData) {
             // prepare reader
             const reader = new FileReader()
-            reader.onload = function (event) {
+            reader.addEventListener("load", function (event) {
               const data = event.target.result
               node.onDropData(data, filename, file)
-            }
+            })
 
             // read data
             const type = file.type.split("/")[0]
@@ -4521,9 +4521,9 @@ export class LGraphCanvas implements ConnectionColorContext {
           this._bg_img.name = this.background_image
           this._bg_img.src = this.background_image
           const that = this
-          this._bg_img.onload = function () {
+          this._bg_img.addEventListener("load", function () {
             that.draw(true, true)
-          }
+          })
         }
 
         let pattern = this._pattern

src/LGraphNode.ts

@@ -2760,10 +2760,10 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
     img.ready = false
 
     const dirty = () => this.setDirtyCanvas(true)
-    img.onload = function (this: AsyncImageElement) {
+    img.addEventListener("load", function (this: AsyncImageElement) {
       this.ready = true
       dirty()
-    }
+    })
     return img
   }