New event modifier: window/win/top?

[jods4]

What if there was a modifier to attach an event on window instead of its target when it is mounted, and removes it when unmounted?

For example, if we call it window:

<div @keydown.window.enter="keyboardShortcutForEnter" />

What could it be useful for?

• Events that are only at window level: online/offline, history, gamepads.
• Events you want to catch globally, such as a keyboard shortcut with keydown.
• Events that you want to handle in their capture phase before they go down the DOM, such as a click for a "click outside" implementation.

What are the alternatives?
Some of the example I gave would probably be better handled with custom directives.
Directives are less flexible, though. Consider the global shortcut example.
We could create a v-shortcut directive for that, and it could even parse the key from a modifier: v-shortcut.enter="..."

• But we don't get all the fancy modifiers combinations for free, e.g. .ctrl.enter.exact, we would need to re-implement that ourselves.
• A directive is bound to a value, not a function, so short inline code would need a lambda: v-shortcut.enter="() => submit(42)" instead of @keydown.window.enter="submit(42)".
• It is a bit hard to keep state in a directive, and we need to store the listener somewhere to be able to remove it when unmounted. Typically you put it on the target element itself, but you need to compose a unique key, keeping in mind that you might have several v-shortcut on the same element.

Worth it or not?

[posva]

I don't think this is a good idea because the events are written next to the element while being attached to something else.
I also think it's not worth it since it can be achieved in userland with a component: https://github.com/shentao/vue-global-events/tree/next

[jods4]

After posting, I thought most of the drawbacks above wouldn't apply to a component, but for some reason I was imagining a wrapper component -- and I don't like excessive component wrapping for every basic concern.

It didn't cross my mind that it could just be an empty component.
vue-global-events is a brillant idea and a nice benefit is that it can be controlled with v-if!

Fully agree here, the empty <global-events> component is a better design that .window modifier.
Thanks for sharing!