Passive event listeners

1

It’s recommended to add some event listeners with { passive: true } in their options:

document.addEventListener('touchmove', onTouchMove, { passive: true })

I guess the only way to do it right now is to explicitly add the event listener in the connect callback, but I may be missing something. Has anyone dealt with it already?

If there’s currently no alternative to manually adding the listener, one idea to the future would be to allow the passive option to be declared in the data-action attribute using a suffix in the event name:

<div data-action="touchmove.passive->controller#method"></div>

2

There’s currently no support for registering passive event listeners with actions.

I like your suffix suggestion. If you’re interested, I think it would make a good issue or pull request!

3 Likes
3

That would be great. The API could easily be extended to the once option at the same time following the same pattern.

Different examples:

<!--passive: true-->
<div data-action="touchmove.passive->controller#method"></div>
<div data-action="touchmove@window.passive->controller#method"></div>

<!--once: true-->
<button data-action="click.once->controller#vote"></button>
<div data-action="keydown@window.once->controller#delete"></div>

I am currently ramping up on TS. So @brunohstein unless you want to submit a PR on this, I think I will try to do so. Looks like a good practical exercise to me :slight_smile:

2 Likes
4

That would be nice, @adrienpoly.