Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Discussion: consider moving from event handler properties to events

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:11 (11 by maintainers)

github_iconTop GitHub Comments

johan-gortercommented, Jul 13, 2021

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-gortercommented, Jul 12, 2021

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
Read more comments on GitHub >

github_iconTop Results From Across the Web

Introduction to events - Learn web development | MDN
Event handler properties ... Objects (such as buttons) that can fire events also usually have properties whose name is on followed by the...
Read more >
Handling Events :: Eloquent JavaScript
Though we have ignored it so far, event handler functions are passed an argument: the event object. This object holds additional information about...
Read more >
A Guide to Handling Browser Events - Sarah Chima
In this article, we will discuss ways browser events can be handled, default browser actions and event propagation.
Read more >
Event Handling with Event Handler Properties
In this lesson, we'll learn how to handle events with event handler properties. As we'll soon learn, these are also commonly called onevent ......
Read more >
event Action<> vs event EventHandler<> - Stack Overflow
Most of the time these events take on the form of public event Action<[classtype], bool> [PropertyName]Changed; or public event Action SomethingHappened; . In ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found