Defining global event type

[geraintluff]

Is there a way to define a global event type which is translated from a DOM event? For example, I'd like to define @move such that I can write:

<div @move="(move) => {posX += move.dx; posY += move.dy}" />

I'd then have a single global definition for the "move" event which listened for mouse-drag, keyboard and scroll-wheel DOM events, and translated them all to common dx/dy values.

The idea is to concisely provide consistent interactivity across my app, instead of having to separately map drag/keyboard/scroll for each control. Is this possible?

[geraintluff]

The API I'm imagining might look something like this:

function registerMove(element, handler) {
    let scrollHandler = event => {...}; // calls handler()
    element.addEventListener('scroll', scrollHandler);

    // other event types
    // ...
    
    // returns an un-register callback
    return () => {
        element.removeEventListener('scroll', scrollHandler);
        // etc.
    };
}

app.addCustomEvent("move", registerMove);