Similar to this solution how can I re-use the code to include both keyDown and keyUp events? I added one even for each KeyUp and KeyDown but there are problems when user holds down and releases a key and the events from the original keyUp event no longer continuously fire.

Example:

• User presses and holds down Ctrl + Shift so KeyDown is continuously fired and prints Ctrl + Shift is pressed.
• User releases Shift while still holding Ctrl so KeyUp is fired once but KeyDown for Ctrl no longer continue to fire

How can I improve this? The aim is to pair this with a mousescrollwheel event. If ctrl+mousewheel then scale plot along x axis. If Alt+moussewheel then scale along ploy Y axis. If both or neither then scale X and Y. Lastly, how can I pair this key modifier event with the mouse scroll wheel I provided to be in a responsive manner? I notice there are times where the key events will block the scroll event.

var scrollDelta = 0;
$(document).on("keydown",  reportKeyEvent("Pressed") );
$(document).on("keyup",  reportKeyEvent("Released") );
$(document).bind("wheel", updateScroll);

function reportKeyEvent (e, eventName) {
    var keyStr = ["Control", "Shift", "Alt"].includes(e.key) ? "" : e.key + " ";
    var out =
        eventName + " " +
        ( e.ctrlKey  ? "Control " : "" ) +
        ( e.shiftKey ? "Shift "   : "" ) +
        ( e.altKey   ? "Alt "     : "" ) +
        keyStr + "key(s)"
    ;
    console.log(out)
    
    ctrlKeyPressed = e.ctrlkey;
    shiftKeyPressed = e.shiftkey;
    altKeyPressed = e.altkey;

    // add shift+scroll?
    // add ctrl+scroll?
   
    e.stopPropagation ();
    e.preventDefault ()
}

function updateScroll(e){
    if(e.deltaY < 0){
        scrollDelta +=50;
    }else if (e.delaY > 0){
        scrollDelta -=50;
    }else{
        scrollDelta = 0;
    }
}