Discussion: consider moving from event handler properties to events

Maquette’s eventing has been working great for us, but we’ve come across two use cases that have issues with the existing implementation:

1. custom elements – from what I’ve seen, there are some web component libraries that don’t promote event handler properties for custom events (e.g., hybrids, lit-element, Stencil), so it won’t be guaranteed that a custom element will have these properties that maquette’s eventing system heavily relies on.
2. onfocusin/onfocusout – Some browsers (Chrome, Firefox, Edge) no longer seem to have event handler properties for these events (test case). For these particular events, we can’t use blur/focus as they don’t bubble. Note that these are the ones that have come up in our development, but there could be others.

Changing maquette’s event interceptor to use events instead of event handler properties should help with these cases.

I look forward to your thoughts on this and if you think it’s something worth doing, I’d be more than happy to help out in any way that I can.

[johan-gorter]

If we mark the old lowercase eventhandlers obsolete, most IDE’s will add a strikethrough. This would minimize making mistakes I hope. DuringCapture was just a suggestion to make the code less cryptical and more readable. We could also consider captureClick, that is both short and readable.

[johan-gorter]

Sorry for the late reply. The separate object may be a little too complex for simple cases, so lets forget that idea for now.

We could also consider using camelCase properties and make the non camelcase ones obsolete. The camelCase properties would then use addEventListener, while the noncamelcase ones uses the legacy behavior.

{
  onclick: handleLegacyClick,
  onClick: handleClick,
  onClickDuringCapture: handleClickDuringCapture
}