add on get/set for all events

Author: keithamus

custom-elements.json

@@ -158,6 +158,19 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "#onloadend",
+              "privacy": "private",
+              "type": {
+                "text": "((event: Event) => void) | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "onloadend"
+            },
             {
               "kind": "field",
               "name": "input",

src/auto-check-element.ts

@@ -77,6 +77,21 @@ export class AutoCheckElement extends HTMLElement {
     return this
   }
 
+  #onloadend: ((event: Event) => void) | null = null
+  get onloadend() {
+    return this.#onloadend
+  }
+
+  set onloadend(listener: ((event: Event) => void) | null) {
+    if (this.#onloadend) {
+      this.removeEventListener('loadend', this.#onloadend as unknown as EventListenerOrEventListenerObject)
+    }
+    this.#onloadend = typeof listener === 'object' || typeof listener === 'function' ? listener : null
+    if (typeof listener === 'function') {
+      this.addEventListener('loadend', listener as unknown as EventListenerOrEventListenerObject)
+    }
+  }
+
   connectedCallback(): void {
     const input = this.input
     if (!input) return

test/auto-check.js

@@ -151,6 +151,22 @@ describe('auto-check element', function () {
 
       assert.deepEqual(['loadstart', 'load', 'loadend'], events)
     })
+
+    it('can use setters', async function () {
+      const events = []
+      const track = event => events.push(event.type)
+
+      checker.onloadstart = track
+      checker.onload = track
+      checker.onerror = track
+      checker.onloadend = track
+
+      const completed = Promise.all([once(checker, 'loadstart'), once(checker, 'load'), once(checker, 'loadend')])
+      triggerInput(input, 'hub')
+      await completed
+
+      assert.deepEqual(['loadstart', 'load', 'loadend'], events)
+    })
   })
 
   describe('auto-check lifecycle events', function () {
@@ -235,7 +251,6 @@ describe('auto-check element', function () {
 
       input.value = 'hub'
       input.dispatchEvent(new InputEvent('input'))
-      input.dispatchEvent(new InputEvent('input'))
     })
 
     it('do not emit if essential attributes are missing', async function () {