handleEvent for the win :)

Hey dear friends!

Do you know about this? https://www.thecssninja.com/javascript/handleevent

I think it would be a nice addition if your eventhandling would accept objects like in vanilla js!

var app = {
  state: { title: 'Example' },
  handleEvent: function(evt) { ....
  render: function() {
     return h('button', { onclick: this })
  }
  ...
}
....

No bind is required when you use vanilla htmlButton.addEventListener('click', app)!

Thanks for your feedback in advance!

[katywings]

Hi @CitrusFruits Thanks a lot for your investigation! Yeah sadly the handleEvent only works with addEventHandler 😕. Personally I would then keep it as is, its not like hundereds of peeps asked for this in the past years 😂

[CitrusFruits]

Stumbled upon this issue today and decided to give it a go. After working on it a bit, I don’t think this is possible without making significant accommodations in Maquette. This is due to the difference between adding an event listener with addEventListener(...) vs directly setting properties on a DOM node, e.g. myNode.oninput = myFunction()...

If you take a look at this codepen you can see the difference plainly.

If we wanted to make this work, Maquette would need to adjust all implementations of on* properties to use addEventListener instead of setting properties directly. Alternatively, we could introduce a domain specific VNodeProperties member such as onEvent that could accommodate either function or object handlers.

But, both of those approaches seem like unnecessary complexity, especially with Maquette’s goal to be as small/lightweight as possible.