Alpine: x-on support for passive event listeners

[alex-page]

I would love to see support for passive event listeners. I imagine it working like:

<div @mousedown.passive="interactive = true">

It looks like it should be pretty easy to implement as x-on is already creating an event listener for the element.
https://github.com/alpinejs/alpine/blob/5181242588436f58c3ea19cd0e45d6dcbe29f853/src/directives/on.js#L22

_Originally posted by @alex-page in https://github.com/alpinejs/alpine/discussions/557_

[HugoDF]

Bear in mind the following:

• We'll need to add a polyfill for IE11, this one might do the trick https://github.com/cadwmaster/polyfill-passive-touch-events or this one https://github.com/lifaon74/events-polyfill (which means we can drop the custom event polyfill)
• when using options with addEventListener the call to removeEventListener needs to have the same options.

Otherwise all the code changes should be localised to the on.js file you've mentioned.

[carlmjohnson]

Google Lighthouse dings my site for not using a passive scroll listener and I don’t support IE11, so I would appreciate this.

[ryangjchandler]

Will look at a PR for this one this weekend.

[HugoDF]

@ryangjchandler did you end up working on this? I might pick this up at some point next week otherwise 😄

[ryangjchandler]

@ryangjchandler did you end up working on this? I might pick this up at some point next week otherwise 😄

Yeah, wrapping up the PR. Will submit tomorrow 🤙🏼

[alex-page]

@ryangjchandler just so we aren't blocking anyone are you able to put up a draft PR?

[ryangjchandler]

@alex-page didn't get around to doing this - @HugoDF did you wanna have a crack?

[HugoDF]

Sure thing