如何使用 blazor 绑定文档事件

Question

我尝试在 Blazor 上编写一个简单的蛇游戏，但找不到任何方法将我的事件绑定到文档上。
有机会在不同元素上绑定事件，例如div或input。
例如像：<input onkeypress="@KeyPressInDiv"/>
在哪里public void KeyPressInDiv(UIKeyboardEventArgs ev) {....}
，我想，应该有一定的类比JavaScript方法document.onkeydown = function (evt) {} 我已经找到了几种方法解决此问题的工作：
1）使用JS绑定和调用blazor代码（摘自https://github.com/ aesalazar/AsteroidsWasm )

document.onkeydown = function (evt) {
  evt = evt || window.event;
  DotNet.invokeMethodAsync('Test.ClientSide', 'JsKeyDown', evt.keyCode);

  //Prevent all but F5 and F12
  if (evt.keyCode !== 116 && evt.keyCode !== 123)
      evt.preventDefault();
};

document.onkeyup = function (evt) {
  evt = evt || window.event;
  DotNet.invokeMethodAsync('Test.ClientSide', 'JsKeyUp', evt.keyCode);

  //Prevent all but F5 and F12
  if (evt.keyCode !== 116 && evt.keyCode !== 123)
      evt.preventDefault();
};

并在 c# 中实现一个静态类，其方法标记为[JSInvokable]和事件。
这项工作，但每次按下都会导致可怕的延迟
2) 可以在其上添加输入标签和绑定事件。
这将比以前的工作速度更快，但是：
- 它主要看起来像一个解决方案
- 我们无法捕获许多操作，例如 Up/DownArrow

是否有直接的方法来绑定来自 blazor 的文档事件？
更新 1：我创建了简单的项目以更好地解释我尝试实现的目标。https://github.com/XelMed/BlazorSnake
Snake 有 3 种实现：
1）纯 js - 这是预期的行为
2) 使用带有 blazor 的 js - 使用 JsInterop 从 JS 代码调用 blazor 函数
3) 使用输入标签 - 在输入标签上绑定事件以控制 Snake

Answer 1

也许使用 JsInterop 将事件侦听器添加到文档，并将匿名函数分配给使用偶数参数调用 C# 方法的事件。

例如你的 JsInterop.js：

document.addEventListener('onkeypress', function (e) {
    DotNet.invokeMethodAsync('Snake', 'OnKeyPress', serializeEvent(e))
});

为了避免一些奇怪的情况，serializeEvent如下：

var serializeEvent = function (e) {
    if (e) {
        var o = {
            altKey: e.altKey,
            button: e.button,
            buttons: e.buttons,
            clientX: e.clientX,
            clientY: e.clientY,
            ctrlKey: e.ctrlKey,
            metaKey: e.metaKey,
            movementX: e.movementX,
            movementY: e.movementY,
            offsetX: e.offsetX,
            offsetY: e.offsetY,
            pageX: e.pageX,
            pageY: e.pageY,
            screenX: e.screenX,
            screenY: e.screenY,
            shiftKey: e.shiftKey
        };
        return o;
    }
};

在您的 C# 代码中您将拥有：

[JSInvokable]
public static async Task OnMouseDown(UIMouseEventArgs e){
    // Do some stuff here
}

Answer 2

您可以将事件直接绑定到 C# 方法，只需使用您需要的事件标记 (onkeyup/onmousemove ....) 。

@page "/"

<div>
    <input type="text" onkeyup=@KeyUp />
</div>
@functions {
    void KeyUp(UIKeyboardEventArgs e)
    {
        Console.WriteLine(e.Key);
    }

    protected override Task OnInitAsync()
    {
        return Task.CompletedTask;
    }
}