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

Question

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

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

使用 VS 2019 模板创建 Blazor App，在下一步中选择 Blazor Server App。

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

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

...拉我的头发，我不能插入代码块，在这里，看第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小部件，以及jQuery插件将如何自己初始化呢？

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

使用其他事件，例如 mouseup : 不工作。

更改我的自定义脚本和 <script src="_framework/blazor.server.js"></script> 的顺序: 两个订单都不起作用...

注释掉 <script src="_framework/blazor.server.js"></script> 行出于诊断原因:现在调用了事件处理程序，我在浏览器中看到控制台输出:“单击处理程序调用”

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

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

Answer 1

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

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

所以这是一个可行的解决方案:
索引 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");
    });
};