Blazor笔记-Component EventCallback

更新记录

完整目录地址：https://www.cnblogs.com/cqpanda/p/17596348.html

2024年3月7日 发布。
2023年8月1日 迁移笔记到博客。

Component EventCallback

EventCallback is a delegate-type used to expose events across components

use EventCallback<T> Type define Component Event Property

Cautions:
EventCallback<T> is a struct type.it don’t perform a null check.
EventCallback is asynchronous and can be awaited.

//Define event
[Parameter]
public EventCallback<int> CurrentCountChanged { get; set; }

//Call event
await CurrentCountChanged.InvokeAsync(CurrentCount);

//bind event
<component @bind-CurrentCount:event="事件名称" ></component>

if you require multiple listeners, you can use Action<T>. Otherwise, it would be best if you used EventCallback<T>

修改默认的HTML DOM事件
To change the default event bindings to make use of the oninput event,
we’ll use the @bind:event directive and specify the event name “oninput”.

<input type="number" @bind:event="oninput" />

或者

<input type="number" @bind-value:event="oninput" />

Blazor event and HTML event

When interacting with the DOM, you will need to handle events of an element. Although Blazor events and HTML events share the same name, they are different. The following image illustrates the difference between Blazor events and HTML events:

For example, a button with an HTML event is coded as follows:

<button type="button" onclick="alert('HTML event fired!')">HTML Event</button>

On the other hand, a button with a Blazor event is coded as follows:

<button type="button" @onclick='_ => ExampleString = "Hello Blazor School!"'>Blazor Event</button>

@code {
    public string ExampleString { get; set; } = "";
}

Handle HTML event with Blazor

Handling HTML events with Blazor is a common task in web development. Each HTML event comes with its own data, and you can pass this event data to a C# method for further processing. Follow these steps to pass HTML event data to a C# method:

Create a C# method that corresponds to the relevant C# event, such as FocusEventArgs for the onblur event.

public void OnElementBlur(FocusEventArgs args)
{
}

Pass the HTML event data using the @on syntax. For example, to pass focus event data to a OnElementBlur method:

<div @onblur="OnElementBlur"></div>

Here's a table of the HTML events and their corresponding C# events:

HTML Event	C# Event	Event Group
onfocus		FocusEventArgs	Focus
onblur		FocusEventArgs	Focus
onfocusin	FocusEventArgs	Focus
onfocusout	FocusEventArgs	Focus
onmouseover	MouseEventArgs	Mouse
onmouseout	MouseEventArgs	Mouse
onmousemove	MouseEventArgs	Mouse
onmousedown	MouseEventArgs	Mouse
onmouseup	MouseEventArgs	Mouse
onclick		MouseEventArgs	Mouse
ondblclick	MouseEventArgs	Mouse
onwheel		WheelEventArgs	Mouse
onmousewheel	WheelEventArgs	Mouse
oncontextmenu	MouseEventArgs	Mouse
ondrag		DragEventArgs	Drag
ondragend	DragEventArgs	Drag
ondragenter	DragEventArgs	Drag
ondragleave	DragEventArgs	Drag
ondragover	DragEventArgs	Drag
ondragstart	DragEventArgs	Drag
ondrop		DragEventArgs	Drag
onkeydown	KeyboardEventArgs	Keyboard
onkeyup		KeyboardEventArgs	Keyboard
onkeypress	KeyboardEventArgs	Keyboard
onchange	ChangeEventArgs	Input
oninput		ChangeEventArgs	Input
oninvalid	EventArgs	Input
onreset		EventArgs	Input
onselect	EventArgs	Input
onselectstart	EventArgs	Input
onselectionchange	EventArgs	Input
onsubmit	EventArgs	Input
onbeforecopy	EventArgs	Clipboard
onbeforecut	EventArgs	Clipboard
onbeforepaste	EventArgs	Clipboard
oncopy	ClipboardEventArgs	Clipboard
oncut	ClipboardEventArgs	Clipboard
onpaste	ClipboardEventArgs	Clipboard
ontouchcancel	TouchEventArgs	Touch
ontouchend	TouchEventArgs	Touch
ontouchmove	TouchEventArgs	Touch
ontouchstart	TouchEventArgs	Touch
ontouchenter	TouchEventArgs	Touch
ontouchleave	TouchEventArgs	Touch
ongotpointercapture	PointerEventArgs	Pointer
onlostpointercapture	PointerEventArgs	Pointer
onpointercancel	PointerEventArgs	Pointer
onpointerdown	PointerEventArgs	Pointer
onpointerenter	PointerEventArgs	Pointer
onpointerleave	PointerEventArgs	Pointer
onpointermove	PointerEventArgs	Pointer
onpointerout	PointerEventArgs	Pointer
onpointerover	PointerEventArgs	Pointer
onpointerup	PointerEventArgs	Pointer
oncanplay	EventArgs	Media
oncanplaythrough	EventArgs	Media
oncuechange	EventArgs	Media
ondurationchange	EventArgs	Media
onemptied	EventArgs	Media
onpause	EventArgs	Media
onplay	EventArgs	Media
onplaying	EventArgs	Media
onratechange	EventArgs	Media
onseeked	EventArgs	Media
onseeking	EventArgs	Media
onstalled	EventArgs	Media
onstop	EventArgs	Media
onsuspend	EventArgs	Media
ontimeupdate	EventArgs	Media
onvolumechange	EventArgs	Media
onwaiting	EventArgs	Media
onloadstart	ProgressEventArgs	Progress
ontimeout	ProgressEventArgs	Progress
onabort	ProgressEventArgs	Progress
onload	ProgressEventArgs	Progress
onloadend	ProgressEventArgs	Progress
onprogress	ProgressEventArgs	Progress
onerror	ErrorEventArgs	Progress
onactivate	EventArgs	Other
onbeforeactivate	EventArgs	Other
onbeforedeactivate	EventArgs	Other
ondeactivate	EventArgs	Other
onended	EventArgs	Other
onfullscreenchange	EventArgs	Other
onfullscreenerror	EventArgs	Other
onloadeddata	EventArgs	Other
onloadedmetadata	EventArgs	Other
onpointerlockchange	EventArgs	Other
onpointerlockerror	EventArgs	Other
onreadystatechange	EventArgs	Other
onscroll	EventArgs	Other
ontoggle	EventArgs	Other

Pass parameters to a C# method from the DOM

To pass parameters to a C# method from the DOM, you can use the following syntax:

<button type="button" @onclick="_ => ExampleMethodWithoutHtmlEvent(ExampleString)">Example parameterized method without HTML event</button>

@code {
    public string ExampleString { get; set; } = "";

    public void ExampleMethodWithoutHtmlEvent(string exampleString)
    {
    }
}

If you need to pass HTML event data along with other parameters, you can modify the syntax as follows:

<button type="button" @onclick="(e) => ExampleMethodWithHtmlEvent(e, ExampleString)">Example parameterized method with HTML event</button>

@code {
    public string ExampleString { get; set; } = "";

    public void ExampleMethodWithHtmlEvent(MouseEventArgs eventArgs, string exampleString)
    {
    }
}

preventDefault in Blazor

By default, events in Blazor trigger their respective browser actions. To cancel these actions, you can use the preventDefault() method in JavaScript. This method stops the default actions of the current event.

<input type="checkbox" @onclick:preventDefault />

stopPropagation in Blazor

<div @onclick:stopPropagation></div>