CarlMungazi

Object.prototype.onsubmit = 1

CarlMungazi

Object.defineProperty(Object.prototype, "onsubmit", {
  get() {
    return (e) => { 
      e.preventDefault();
      console.log('I am on the setter');
    }
  },
  set(val) {
    console.log(val);
  }

CarlMungazi

m.render(document.getElementById('app'), 
  m('form', {
    onsubmit: (e) => { 
      e.preventDefault(); 
      console.log('I am on the form element')
    }
  }, [
    m('button', { type: 'submit'}, 'Submit')
  ])
)

CarlMungazi

m.render(document.getElementById('app'), 
  m('form', {
    onreset: (e) => { 
      console.log('resetting form...')
    },
    onsubmit: (e) => { 
      e.preventDefault(); 
      console.log('submitting form...')
    },
  }, [

CarlMungazi

function updateEvent(vnode, key, value) {
  if (vnode.events != null) {
    if (vnode.events[key] === value) return
    if (value != null && (typeof value === "function" || typeof value === "object")) {
      if (vnode.events[key] == null) vnode.dom.addEventListener(key.slice(2), vnode.events, false)
      vnode.events[key] = value
    }
    // ...
  }
  // ...

CarlMungazi

{
  attrs: {
    onreset: onreset(e) { /* ... */ }, 
    onsubmit: onsubmit(e) { /* ... */ },
  }
  children: [{…}, {…}]
  dom: form
  domSize: undefined
  events: EventDict {
    onreset: onreset(e) { /* ... */ },

CarlMungazi

function updateEvent(vnode, key, value) {
  if (vnode.events != null) {
    if (vnode.events[key] === value) return
    if (value != null && (typeof value === "function" || typeof value === "object")) {
      if (vnode.events[key] == null) vnode.dom.addEventListener(key.slice(2), vnode.events, false)
      vnode.events[key] = value
    } else {
      if (vnode.events[key] != null) vnode.dom.removeEventListener(key.slice(2), vnode.events, false) 
      vnode.events[key] = undefined
    }

CarlMungazi

// Here's an explanation of how this works:
// 1. The event names are always (by design) prefixed by `on`.
// 2. The EventListener interface accepts either a function or an object
//    with a `handleEvent` method.
// 3. The object does not inherit from `Object.prototype`, to avoid
//    any potential interference with that (e.g. setters).
// 4. The event name is remapped to the handler before calling it.
// 5. In function-based event handlers, `ev.target === this`. We replicate
//    that below.
// 6. In function-based event handlers, `return false` prevents the default

CarlMungazi

{
  actualDuration: 4.100000005564652
  actualStartTime: 95595.49999999581
  alternate: null
  child: null
  childExpirationTime: 0
  effectTag: 0
  elementType: "h1"
  expirationTime: 0
  firstContextDependency: null

CarlMungazi

{
  actualDuration: 6.800000002840534
  actualStartTime: 95592.79999999853
  alternate: FiberNode {tag: 3, key: null, …}
  child: FiberNode {tag: 5, key: null, …}
  childExpirationTime: 0
  effectTag: 32
  elementType: null
  expirationTime: 0
  firstContextDependency: null