Event listener options

[tigt]

Description

It’s a shame that to use all the features of browser event handlers, one has to drop out of the happy path syntax and manually initialize/clean up listeners in the class — especially if the component would not be stateful otherwise.

Why

• passive: true is crucial for smooth scrolling for pages with touch*/wheel handlers — see Default touch/wheel events to passive #1404
• Sometimes, the capturing phase of events is necessary (especially with focus-ish events)
• Marko already has the once option with once-eventName, so that’s cool

It also seems likely that addEventListener() will gain more options as the Web platform advances.

Possible Implementation & Open Questions

The first thing that jumped to my mind was a second argument to event attributes:

<button on-click=(handler, { …options })>

But I can see how the wrapping parentheses are undesirable. It could also look like this with a handler prop, which surprisingly has precedent on the Web platform:

<button on-click={ handler: handlerFn, passive: true, once: true }>

Is this something you're interested in working on?

Yes