使用 Blazor Server 时如何添加客户端 DOM javascript 事件处理程序？

Question

...是的，我知道... Blazor Server 是服务端，我可以在服务器端使用我的 C# 代码处理 DOM 事件...添加纯客户端 javascript 事件处理程序仍然有意义，令人惊讶的是似乎不可能，因为 _framework/blazor.server.js 吞噬了它们......

这里是重现我在做什么的最简单的孤立步骤。

1. 使用 VS 2019 模板创建 Blazor 应用，下一步选择 Blazor Server 应用。

2. 在 Index.razor 的任意位置添加一行 <div id="test">Hello, click me!</div>

3. 在 _Host.cshtml 中，在已经存在的 <script src="_framework/blazor.server.js"></script> 行之后或之前添加以下脚本：

   ...拔头发，我不能插入代码块，这里，看第4步之后...

4. 运行应用程序，然后按 F12 查看控制台输出。

这是第 3 步中的脚本：

<script>
    console.log("script is executing...");
    console.log("element found, its innerText is: " + document.getElementById("test").innerText);

    document.getElementById("test").addEventListener("click",
        function() {
            console.log("click handler called");
        });
</script>

问题

我错过了什么吗？是否可以在没有服务器往返的情况下完成这项工作？如果不可能，那么现有的很多javascript widgets，以及jQuery plugins将如何自己初始化呢？

到目前为止我尝试了什么？

• 使用其他事件，例如mouseup：不起作用。
• 更改我的自定义脚本和 <script src="_framework/blazor.server.js"></script> 的顺序：两个顺序都不起作用...
• 出于诊断原因将<script src="_framework/blazor.server.js"></script> 行注释掉：事件处理程序现在被调用，我在浏览器中看到控制台输出：“单击处理程序被调用”

提前回答“我为什么要这样做？”：

例如，我想实现一个 DOM 行为，其中单击一个元素会更改其属性中的某些内容。我知道，我可以附加一个 C# 处理程序，然后调用一个返回的 javascript 函数，但我不喜欢这种往返。 除此之外，可能还有许多现有的 javascript 插件和 lib，它们依赖于其初始化脚本在 DOM 上附加事件处理程序。

Answer 1

...根据来自火星的 agua 在他的评论中指出的文档： （如果有人有更好的想法，请回答或评论）

如果我运行客户端脚本，该脚本在服务器 OnAfterRender 事件之后 附加事件处理程序，那么它就可以工作。如果我之前以任何方式运行它（例如在 OnInitialized 事件中）它将不起作用：

所以这是一个可行的解决方案： Index.razor

@code
{
    protected override void OnAfterRender(bool firstRender)
    {
        _jsRuntime.InvokeVoidAsync("attachHandlers");
    }
}

_Host.cshtml：

window.attachHandlers = () => {
    document.getElementById("test").addEventListener("click", function()
    {
         console.log("click handler called");
    });
};