分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #.Net   #Web   #Web Client   #Blazor   ◆ 发布于: 2023-05-27 16:08:37

今天我们来学习事件处理。

Blazor框架允许我们在HTML 标记的属性里添加事件监听，这里有一个需要理解的概念，那就是这些事件是具体到底指的是什么事情？ 其实我们这里指的是的ODM事件，因此我们可以通过如下的链接来参考一下目前可以支持的多少ODM 事件：https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers

如何进行事件的监听和处理？

具体的语法如下：

<input @on{EventName} = "deletage name"/>

如下图：

事件deletgate的参数以及参数类型：

事件delegate的参数根据需要可以在定义的时候传入参数，根据每个监听的事件不同，所预置的参数也是不同的。关于事件的说明和事件参数，您可以参考如下的上述文档，另外也可以参考文档：

https://github.com/dotnet/aspnetcore/tree/main/src/Components/Web/src/Web

Lambad表达式

在事件的处理中，可以直接使用Lambda， 我们直接看一个实例吧：

EventCallBack

EventCallBack主要的应用场景是如果想从子组件中调用父组件的方法，该如何做呢？我们这里就可以使用EventCallBack和EventCallBack<T> 这两个委托完成这个功能，具体可以看如下的实例：

注意这其中OnClickCallBack作为一个组件参数传给父组件的。

防止默认事件动作发生

使用如下的语法来防止默认的事件发生

@on{EVENT}:preventDefault

如下图：

阻止事件的传播

使用语法：

@on{EVENT}:stopPropagation

 实例如下：

把焦点聚在某个元素上

对元素调用方法：FocusAsync(), 如下图：