Blazor侦听javascript事件

我有一个名为Hello的javascript事件：

addEventListener（'hello'，函数（）{
警报（“事件侦听器”）；
})

在另一个javascript函数中，我引发了事件：

let event=new事件（“hello”，{bubbles:true}）；
文件、调度事件（事件）；

我现在想做的是让事件在javascript函数中触发。 Blazor应该侦听事件，而不是javascript调用Blazor方法

希望有人能帮助我

---

就我而言，

对于自定义事件，您需要手动使用

使用以下方法：

• 通过引用将.NET实例传递给JavaScript：
  • 对DotNetObjectReference.Create进行静态调用
  • 将实例包装在DotNetObjectReference实例中，并在DotNetObjectReference实例上调用Create。处置DotNetObjectReference对象（本节后面将显示一个示例）
• 使用

  invokeMethod

  或

  invokeMethodAsync

  函数在实例上调用.NET实例方法。当从JavaScript调用其他.NET方法时，.NET实例也可以作为参数传递

例子 注意，这是一个非常简化的示例。您可能想添加一些内容；从interop类上的IDisposable开始

在C#中，创建一个帮助器类来管理互操作：

公共类CustomEventHelper
{
私有只读函数回调；
公共CustomEventHelper（Func回调）
{
_回调=回调；
}
[可调用]
公共任务OnCustomEvent（EventArgs args）=>\u回调（args）；
}
公共类CustomEventInterop:IDisposable
{
私有只读IJSRuntime\jsu运行时；
私有DotNetObjectReference；
公共CustomEventInterop（IJSRuntime jsRuntime）
{
_jsRuntime=jsRuntime；
}
公共价值任务设置CustomEventCallback（Func回调）
{
Reference=DotNetObjectReference.Create（新建ScrollEventHelper（回调））；
//addCustomEventListener将是我们稍后创建的js函数
返回jsRuntime.InvokeAsync（“addCustomEventListener”，引用）；
}
公共空间处置（）
{
引用？.Dispose（）；
}
}

在Blazor组件中，添加interop类的实例（

interop

），并添加本地方法作为回调（

HandleCustomEvent

）：

private CustomEventInterop Interop{get；set；}
AfterRenderAsync（bool firstRender）上受保护的重写异步任务{
如果（！firstRender）
{
返回；
}
Interop=new（JS）；
等待Interop.SetupCustomEventCallback（args=>HandleCustomEvent（args））；
hasprended=true；
}
私有无效HandleCustomEvent（EventArgs args）{
//…在此处处理自定义事件
}

在JavaScript中，添加一个引用

DotNetObjectReference

的方法，并可以在C#中调用互操作：

函数addCustomEventListener（dotNetObjectRef）{
document.addEventListener（'hello'，（事件）=>{
//使用[JSInokable]属性（如上）按名称调用方法
dotNetObjectRef.invokeMethodAsync（'OnCustomEvent'）
});
}

---

如果使用TypeScript，您可能会查看此信息。

您使用的是.NET的哪个版本？我使用的是.NET 5.0，我之所以这么问是因为.NET 6 preview 2向Blazor引入了自定义事件类型。在此之前，如果您想处理像您这样的自定义事件，您需要通过让您的自定义事件处理程序分派您正在侦听的标准事件来“欺骗”blazor，例如，在blazor代码中包含类似于

的内容，然后在JS代码中，每当捕捉到

hello

事件时，将

change

事件发送到

foo

。感谢您的提示。我仍然可以更改为版本6 prev 2，因为我刚刚开始构建应用程序。你的建议是什么？转到.NET6预览版3，然后你可以这样做：我只想要一个用javascript创建的事件的子脚本。没有使用按钮或ui元素。就像《观察家家长》一样，你必须使用JS互操作。从.NET 5开始，这是在blazor中侦听自定义事件的唯一方法。@除非使用.NET 6预览，否则JS interop是处理真正自定义事件的最佳方法。mrmagoo的攻击可能有效，但仍然是：一种攻击。我们不要混淆，移动到.NET6 P2/3并使用自定义事件类型是“blazor方式”，但仍在预览中。其他任何事情都是一个解决办法。我个人不会使用这种方法，但它肯定会起作用，而且是一种可靠的方法。确切地说，这不是在Blazor中使用JS interop实现事件侦听器的唯一方法。在.NET6发布之前，我认为JSInterop是解决问题的最可靠的方法。它甚至可以扩展为接受来自js的可序列化负载，这是使用

@onclick

解决方案无法做到的。如果你不需要任何花哨的东西，那么@mister magoo也为你提供了一个很好的解决方案。我怀疑当.NET6发布时，会有更吸引人的答案。