在不重复事件的情况下从blazor服务器c#调用javascript文档事件侦听器，但维护dotnetference

Blazor服务器-我想使用键盘键来控制屏幕.

1.我将dotNetReference传递给我的javascript函数.

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        
        var dotNetReference = DotNetObjectReference.Create(this);
        await JSRuntime.InvokeVoidAsync("JsFunctions.addKeyboardListenerEvent", dotNetReference);

    }

2. 我运行该脚本并返回对razor Page的调用.

当它是匿名函数时，无论KeyUp发生多少次，它都会重复调用.当定义了带有EventListener的函数调用时，我丢失了dotNetReference，但它正确地运行了一次！

3. 我已经很接近了，但我想不出如何持久化dotNetReference以便它可以调用C#方法

匿名

    addKeyboardListener: function (dotNetReference) {
        

        document.addEventListener('keyup', function(event) {
            /*document.removeEventListener('keyup');*/
            if (event.key == 7) {
                dotNetReference.invokeMethodAsync('Prev');
            }
            if (event.key == 8) {
                dotNetReference.invokeMethodAsync('Next');
            }
            if (event.key == 3) {
                dotNetReference.invokeMethodAsync('NavigateToOverviewPage');
            }
        });

已定义 AddKeyboardListener:函数(DotNetReference){

    document.addEventListener('keyup', myFunction) 


    function myFunction(event) {

        // Calls a method by name with the [JSInokable] attribute (above)
        var dotNetReference = dotNetReference
        if (event.key == 7) {
            dotNetReference.invokeMethodAsync('Prev');
        }
        if (event.key == 8) {
            dotNetReference.invokeMethodAsync('Next');
        }
        if (event.key == 3) {
            dotNetReference.invokeMethodAsync('NavigateToOverviewPage');
        }
    }

}

C#
[JSInvokable]
public  void Next()
{
    ClearMessages();
}

必须有一种方法来持久化dotNetReference，但我想不出来，而且肯定缺少一种明显的方法来实现这一点.谢谢.