copy over events

Whenever we morph elements we should probs be copying over the events. From yo-yo:

// update-events.js
module.exports = [
  // attribute events (can be set with attributes)
  'onclick',
  'ondblclick',
  'onmousedown',
  'onmouseup',
  'onmouseover',
  'onmousemove',
  'onmouseout',
  'ondragstart',
  'ondrag',
  'ondragenter',
  'ondragleave',
  'ondragover',
  'ondrop',
  'ondragend',
  'onkeydown',
  'onkeypress',
  'onkeyup',
  'onunload',
  'onabort',
  'onerror',
  'onresize',
  'onscroll',
  'onselect',
  'onchange',
  'onsubmit',
  'onreset',
  'onfocus',
  'onblur',
  'oninput',
  // other common events
  'oncontextmenu',
  'onfocusin',
  'onfocusout'
]

// copy.js
  function copier (f, t) {
    // copy events:
    var events = opts.events || defaultEvents
    for (var i = 0; i < events.length; i++) {
      var ev = events[i]
      if (t[ev]) { // if new element has a whitelisted attribute
        f[ev] = t[ev] // update existing element
      } else if (f[ev]) { // if existing element has it and new one doesnt
        f[ev] = undefined // remove it from existing element
      }
    }
    // copy values for form elements
    if ((f.nodeName === 'INPUT' && f.type !== 'file') || f.nodeName === 'TEXTAREA' || f.nodeName === 'SELECT') {
      if (t.getAttribute('value') === null) t.value = f.value
    }
  }

[yoshuawuyts]

@kristoferjoseph looping should be rare tho; if we implement morphdom’s .isSameNode() trick then only the hot path will ever be looped for equal nodes only which even pessimistically isn’t that many nodes.

Optimistically it should be fine I think; doing the existing approach of yo-yo we’re already miles ahead of every rendering engine in terms of perf so I’m not too worried for real world perf, even though from a purist standpoint I wholly agree with what you’re saying - maybe mark it as something to revisit later?

[kristoferjoseph]

Looks like you can copy over only the events being used by an element, but it requires looping over the elements keys. That may be faster than iterating over a longer list of event types, but I am not sure. https://github.com/kristoferjoseph/nanomorph/blob/master/morph.js#L16