handleEvent for the win :)

[Katja Lutz]

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!

[Johan Gorter]

Am I right that the only change for this to work would be a change to the Typescript definition of VNodeProperties.on* or do you need something more for this to work?

[Katja Lutz]

@johan-gorter Thanks for your fast feedback!
I am not a TS user ;). I think it doesnt currently accept objects because of this: https://github.com/AFASSoftware/maquette/blob/master/src/maquette.ts#L478

[Johan Gorter]

Hmm, this would mean that the click handler should execute, only the scheduleRender will not be called automatically. This is worth investigating if we can make this work.

[Andrew Duensing]

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.

[Katja Lutz]

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 😂