Why are you converting inline events to event listeners?

TL;DR Treat inline events like attributes when diff/patching the DOM.

I’ve noticed you’re having lots of issues with events, so I looked at the code. I noticed in the setElementData method you have the following:

function setElementData(element, name, value, oldValue) {
  ...

  } else if (name[0] === "o" && name[1] === "n") {
    var event = name.substr(2)

    element.removeEventListener(event, oldValue)
    element.addEventListener(event, value)

  }

It’s not clear to me why you would need to convert the inline events into event listeners. They are two different things. Inline events are treated like any other attributes on a element. You can set and remove them like so:

// Attach inline event:
document.querySelector(‘#btn’).setAttribute(‘onclick’, ‘alert(“Hi!”)’)
// Clicking button will alert “Hi!”.
// Now remove inline event:
document.querySelector(‘#btn’).removeAttribute(‘onclick’)
// Now clicking button does nothing.

In fact, you can get the inline event on an element through its attributes property:

<button onclick=‘alert(“Hello”)’>Click</button>

document.querySelector(‘button’).attributes[0].firstChild === “onclick”
// true

I’m pretty sure what you’re doing there may create duplicate events on documents, leading to various hard to sort out issues.

Or am I missing something here? (possibly)

[rbiggs]

And another bytes the dust 😉

[jorgebucaran]

@rbiggs Thanks a lot! This saved us like 200 bytes, give or take. 🎉