Blazor Event Classification
In Blazor components, HTML elements can trigger events using the @on{EventName} format to bind the triggered event.
@on{} indicates how the event is triggered.
For example:
<button @onclick="MyEvent">Button</button>
@code{
private void MyEvent()
{
}
}
In Blazor, there are many ways to bind events related to HTML element events, which can be hard to remember. Therefore, the author has summarized and organized them.
The types of triggering events are as follows:
| Type | Description |
| ------------------------------------------ | ------------------------------------------------------------ |
| BindAttributes | Use the @bind directive to bind events to an element. |
| ClipboardEventArgs | Provides information about the clipboard events being invoked. |
| DataTransfer | The DataTransfer object is used to hold data during drag and drop operations. |
| DataTransferItem | The DataTransferItem object represents a dragged data item. |
| DragEventArgs | Provides information about the drag events being invoked. |
| ErrorEventArgs | Provides information about the error events being invoked. |
| EventHandlers | Stores the EventHandler properties to configure the mapping between event names and event parameter types. |
| FocusEventArgs | Provides information about the focus events being invoked. |
| KeyboardEventArgs | Provides information about the keyboard events being invoked. |
| MouseEventArgs | Provides information about the mouse events being invoked. |
| PointerEventArgs | Provides information about the pointer events being invoked. |
| ProgressEventArgs | Provides information about the progress events being invoked. |
| TouchEventArgs | Provides information about the touch events being invoked. |
| TouchPoint | Represents a single touch point on a touch-sensitive device. |
| WebEventCallbackFactoryEventArgsExtensions | Extension class that provides extension methods for EventCallbackFactory and EventArgs types. |
| WebRenderTreeBuilderExtensions | Extension class that provides methods for building collections of RenderTreeFrame entries. |
| WheelEventArgs | Provides information about the mouse wheel events being invoked. |
Most of the above types are passed as parameters in events.
Event Parameter Types
In HTML, there are many events that elements can trigger. The parameter types corresponding to different DOM events in Blazor after binding are as follows:
| Event | Class | DOM Events and Description |
| :------- | :------------------- | :----------------------------------------------------------- |
| Clipboard | ClipboardEventArgs | oncut, oncopy, onpaste |
| Drag | DragEventArgs | ondrag, ondragstart, ondragenter, ondragleave, ondragover, ondrop, ondragend. DataTransfer and DataTransferItem maintain the drag data. |
| Error | ErrorEventArgs | onerror |
| Event | EventArgs | General: onactivate, onbeforeactivate, onbeforedeactivate, ondeactivate, onended, onfullscreenchange, onfullscreenerror, onloadeddata, onloadedmetadata, onpointerlockchange, onpointerlockerror, onreadystatechange, onscroll
Clipboard: onbeforecut, onbeforecopy, onbeforepaste
Input: oninvalid, onreset, onselect, onselectionchange, onselectstart, onsubmit Media: oncanplay, oncanplaythrough, oncuechange, ondurationchange, onemptied, onpause, onplay, onplaying, onratechange, onseeked, onseeking, onstalled, onstop, onsuspend, ontimeupdate, onvolumechange, onwaiting |
| Focus | FocusEventArgs | onfocus, onblur, onfocusin, onfocusout Does not support relatedTarget. |
| Input | ChangeEventArgs | onchange, oninput |
| Keyboard | KeyboardEventArgs | onkeydown, onkeypress, onkeyup |
| Mouse | MouseEventArgs | onclick, oncontextmenu, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout |
| Pointer | PointerEventArgs | onpointerdown, onpointerup, onpointercancel, onpointermove, onpointerover, onpointerout, onpointerenter, onpointerleave, ongotpointercapture, onlostpointercapture |
| Wheel | WheelEventArgs | onwheel, onmousewheel |
| Progress | ProgressEventArgs | onabort, onload, onloadend, onloadstart, onprogress, ontimeout |
| Touch | TouchEventArgs | ontouchstart, ontouchend, ontouchmove, ontouchenter, ontouchleave, ontouchcancel. TouchPoint represents a single touch point on a touch-sensitive device. |
Blazor Triggering Methods
Among them, EventHandlers are used to configure the mapping relationship between event names and event parameter types, specifically referring to generating @on{EventName}.
Below is a portion of them:
The above content describes its characteristics.
using System;
namespace Microsoft.AspNetCore.Components.Web
{
// Token: 0x02000009 RID: 9
[EventHandler("onfocus", typeof(FocusEventArgs), true, true)]
[EventHandler("onblur", typeof(FocusEventArgs), true, true)]
[EventHandler("onfocusin", typeof(FocusEventArgs), true, true)]
[EventHandler("onfocusout", typeof(FocusEventArgs), true, true)]
[EventHandler("onmouseover", typeof(MouseEventArgs), true, true)]
[EventHandler("onmouseout", typeof(MouseEventArgs), true, true)]
[EventHandler("onmousemove", typeof(MouseEventArgs), true, true)]
[EventHandler("onmousedown", typeof(MouseEventArgs), true, true)]
[EventHandler("onmouseup", typeof(MouseEventArgs), true, true)]
[EventHandler("onclick", typeof(MouseEventArgs), true, true)]
[EventHandler("ondblclick", typeof(MouseEventArgs), true, true)]
[EventHandler("onwheel", typeof(WheelEventArgs), true, true)]
[EventHandler("onmousewheel", typeof(WheelEventArgs), true, true)]
[EventHandler("oncontextmenu", typeof(MouseEventArgs), true, true)]
[EventHandler("ondrag", typeof(DragEventArgs), true, true)]
[EventHandler("ondragend", typeof(DragEventArgs), true, true)]
[EventHandler("ondragenter", typeof(DragEventArgs), true, true)]
[EventHandler("ondragleave", typeof(DragEventArgs), true, true)]
[EventHandler("ondragover", typeof(DragEventArgs), true, true)]
[EventHandler("ondragstart", typeof(DragEventArgs), true, true)]
[EventHandler("ondrop", typeof(DragEventArgs), true, true)]
[EventHandler("onkeydown", typeof(KeyboardEventArgs), true, true)]
[EventHandler("onkeyup", typeof(KeyboardEventArgs), true, true)]
[EventHandler("onkeypress", typeof(KeyboardEventArgs), true, true)]
[EventHandler("onchange", typeof(ChangeEventArgs), true, true)]
[EventHandler("oninput", typeof(ChangeEventArgs), true, true)]
[EventHandler("oninvalid", typeof(EventArgs), true, true)]
[EventHandler("onreset", typeof(EventArgs), true, true)]
[EventHandler("onselect", typeof(EventArgs), true, true)]
[EventHandler("onselectstart", typeof(EventArgs), true, true)]
[EventHandler("onselectionchange", typeof(EventArgs), true, true)]
[EventHandler("onsubmit", typeof(EventArgs), true, true)]
[EventHandler("onbeforecopy", typeof(EventArgs), true, true)]
[EventHandler("onbeforecut", typeof(EventArgs), true, true)]
[EventHandler("onbeforepaste", typeof(EventArgs), true, true)]
[EventHandler("oncopy", typeof(ClipboardEventArgs), true, true)]
[EventHandler("oncut", typeof(ClipboardEventArgs), true, true)]
[EventHandler("onpaste", typeof(ClipboardEventArgs), true, true)]
[EventHandler("ontouchcancel", typeof(TouchEventArgs), true, true)]
[EventHandler("ontouchend", typeof(TouchEventArgs), true, true)]
[EventHandler("ontouchmove", typeof(TouchEventArgs), true, true)]
[EventHandler("ontouchstart", typeof(TouchEventArgs), true, true)]
[EventHandler("ontouchenter", typeof(TouchEventArgs), true, true)]
[EventHandler("ontouchleave", typeof(TouchEventArgs), true, true)]
[EventHandler("ongotpointercapture", typeof(PointerEventArgs), true, true)]
[EventHandler("onlostpointercapture", typeof(PointerEventArgs), true, true)]
[EventHandler("onpointercancel", typeof(PointerEventArgs), true, true)]
[EventHandler("onpointerdown", typeof(PointerEventArgs), true, true)]
[EventHandler("onpointerenter", typeof(PointerEventArgs), true, true)]
[EventHandler("onpointerleave", typeof(PointerEventArgs), true, true)]
[EventHandler("onpointermove", typeof(PointerEventArgs), true, true)]
[EventHandler("onpointerout", typeof(PointerEventArgs), true, true)]
[EventHandler("onpointerover", typeof(PointerEventArgs), true, true)]
[EventHandler("onpointerup", typeof(PointerEventArgs), true, true)]
[EventHandler("oncanplay", typeof(EventArgs), true, true)]
[EventHandler("oncanplaythrough", typeof(EventArgs), true, true)]
[EventHandler("oncuechange", typeof(EventArgs), true, true)]
[EventHandler("ondurationchange", typeof(EventArgs), true, true)]
[EventHandler("onemptied", typeof(EventArgs), true, true)]
[EventHandler("onpause", typeof(EventArgs), true, true)]
[EventHandler("onplay", typeof(EventArgs), true, true)]
[EventHandler("onplaying", typeof(EventArgs), true, true)]
[EventHandler("onratechange", typeof(EventArgs), true, true)]
[EventHandler("onseeked", typeof(EventArgs), true, true)]
[EventHandler("onseeking", typeof(EventArgs), true, true)]
[EventHandler("onstalled", typeof(EventArgs), true, true)]
[EventHandler("onstop", typeof(EventArgs), true, true)]
[EventHandler("onsuspend", typeof(EventArgs), true, true)]
[EventHandler("ontimeupdate", typeof(EventArgs), true, true)]
[EventHandler("onvolumechange", typeof(EventArgs), true, true)]
[EventHandler("onwaiting", typeof(EventArgs), true, true)]
[EventHandler("onloadstart", typeof(ProgressEventArgs), true, true)]
[EventHandler("ontimeout", typeof(ProgressEventArgs), true, true)]
[EventHandler("onabort", typeof(ProgressEventArgs), true, true)]
[EventHandler("onload", typeof(ProgressEventArgs), true, true)]
[EventHandler("onloadend", typeof(ProgressEventArgs), true, true)]
[EventHandler("onprogress", typeof(ProgressEventArgs), true, true)]
[EventHandler("onerror", typeof(ErrorEventArgs), true, true)]
[EventHandler("onactivate", typeof(EventArgs), true, true)]
[EventHandler("onbeforeactivate", typeof(EventArgs), true, true)]
[EventHandler("onbeforedeactivate", typeof(EventArgs), true, true)]
[EventHandler("ondeactivate", typeof(EventArgs), true, true)]
[EventHandler("onended", typeof(EventArgs), true, true)]
[EventHandler("onfullscreenchange", typeof(EventArgs), true, true)]
[EventHandler("onfullscreenerror", typeof(EventArgs), true, true)]
[EventHandler("onloadeddata", typeof(EventArgs), true, true)]
[EventHandler("onloadedmetadata", typeof(EventArgs), true, true)]
[EventHandler("onpointerlockchange", typeof(EventArgs), true, true)]
[EventHandler("onpointerlockerror", typeof(EventArgs), true, true)]
[EventHandler("onreadystatechange", typeof(EventArgs), true, true)]
[EventHandler("onscroll", typeof(EventArgs), true, true)]
public static class EventHandlers
{
}
}
HTML Standard Event Classification
The table below lists the standard event attributes that can be inserted into HTML elements to define event behavior.
- Window Event Attributes
- Form Events
- Keyboard Events
- Mouse Events
- Media Events
For specific event attributes possessed by different HTML elements, please refer to w3school https://www.w3school.com.cn/tags/html_ref_eventattributes.asp
The following appendix is a transcription from w3school regarding the classification and description of various events.
1) Window Event Attributes
Events triggered by the window object.
Applicable to the <body> tag:
| Attribute | Value | Description |
| ---------------- | -------- | ------------------------------------------------------- |
| onafterprint | script | Run script after printing the document |
| onbeforeprint | script | Run script before printing the document |
| onbeforeonload | script | Run script before the document loads |
| onblur | script | Run script when the window loses focus |
| onerror | script | Run script when an error occurs |
| onfocus | script | Run script when the window gains focus |
| onhaschange | script | Run script when the document changes |
| onload | script | Run script when the document loads |
| onmessage | script | Run script when a message is triggered |
| onoffline | script | Run script when the document is offline |
| ononline | script | Run script when the document is online |
| onpagehide | script | Run script when the window is hidden |
| onpageshow | script | Run script when the window is visible |
| onpopstate | script | Run script when the window's history changes |
| onredo | script | Run script when the document executes a redo operation |
| onresize | script | Run script when the window is resized |
| onstorage | script | Run script when the document storage is loaded |
| onundo | script | Run script when the Web Storage area updates |
| onunload | script | Run script when the user leaves the document |
2) Form Events
Events triggered by actions within HTML forms.
| Attribute | Value | Description |
| ---------------- | -------- | ---------------------------------------------- |
| onblur | script | Run script when the element loses focus |
| onchange | script | Run script when the element changes |
| oncontextmenu | script | Run script when the context menu is triggered |
| onfocus | script | Run script when the element gains focus |
| onformchange | script | Run script when the form changes |
| onforminput | script | Run script when the form receives user input |
| oninput | script | Run script when the element receives user input|
| oninvalid | script | Run script when the element is invalid |
| onreset | script | Run script when the form is reset. HTML5 does not support |
<br />
| 属性 | 值 | 描述 |
| ------------ | -------- | ---------------------------------------- |
| onselect | *script* | Run script when an element is selected |
| onsubmit | *script* | Run script when a form is submitted |
#### 3) Keyboard Events
Events triggered by keyboard actions.
| 属性 | 值 | 描述 |
| ------------ | -------- | --------------------------------------- |
| onkeydown | *script* | Run script when a key is pressed |
| onkeypress | *script* | Run script when a key is pressed and released |
| onkeyup | *script* | Run script when a key is released |
#### 4) Mouse Events
Events triggered by mouse or similar user actions.
| 属性 | 值 | 描述 |
| ------------- | -------- | --------------------------------------------- |
| onclick | *script* | Run script when mouse is clicked |
| ondblclick | *script* | Run script when mouse is double-clicked |
| ondrag | *script* | Run script when an element is dragged |
| ondragend | *script* | Run script when the drag operation ends |
| ondragenter | *script* | Run script when an element is dragged to a valid drop target |
| ondragleave | *script* | Run script when an element leaves a valid drop target |
| ondragover | *script* | Run script when an element is dragged over a valid drop target |
| ondragstart | *script* | Run script when the drag operation starts |
| ondrop | *script* | Run script when an element is being dropped |
| onmousedown | *script* | Run script when a mouse button is pressed |
| onmousemove | *script* | Run script when the mouse pointer moves |
| onmouseout | *script* | Run script when the mouse pointer leaves an element |
| onmouseover | *script* | Run script when the mouse pointer hovers over an element |
| onmouseup | *script* | Run script when a mouse button is released |
| onmousewheel | *script* | Run script when the mouse wheel is scrolled |
| onscroll | *script* | Run script when the scroll bar of an element is scrolled |
#### 5) Media Events
Events triggered by media such as video, images, and audio.
These apply to all HTML 5 elements but are most commonly used in media elements (such as audio, embed, img, object, and video):
| 属性 | 值 | 描述 |
| ------------------ | -------- | --------------------------------------------------------------------- |
| onabort | *script* | Run script when an abort event occurs |
| oncanplay | *script* | Run script when media can start playing but may need to stop due to buffering |
| oncanplaythrough | *script* | Run script when media can play through to the end without stopping for buffering |
| ondurationchange | *script* | Run script when the length of media changes |
| onemptied | *script* | Run script when the media resource suddenly becomes empty (network error, loading error, etc.) |
| onended | *script* | Run script when the media has reached the end |
| onerror | *script* | Run script when an error occurs during the loading of the element |
| onloadeddata | *script* | Run script when the media data is loaded |
| onloadedmetadata | *script* | Run script when the duration and other metadata of the media element are loaded |
| onloadstart | *script* | Run script when the browser starts loading media data |
| onpause | *script* | Run script when the media data is paused |
| onplay | *script* | Run script when the media data is about to start playing |
| onplaying | *script* | Run script when the media data has started playing |
| onprogress | *script* | Run script when the browser is fetching media data |
| onratechange | *script* | Run script when the playback rate of media data changes |
| onreadystatechange | *script* | Run script when the ready state changes |
| onseeked | *script* | Run script when the seeked property of the media element is false and seeking has ended |
| onseeking | *script* | Run script when the seeking property of the media element is true and seeking has started |
| onstalled | *script* | Run script when there is an error while fetching media data (delay) |
| onsuspend | *script* | Run script when the browser has stopped fetching media data but hasn't finished loading the whole file |
| ontimeupdate | *script* | Run script when the media changes its playback position |
| onvolumechange | *script* | Run script when the media volume changes or is set to mute |
| onwaiting | *script* | Run script when the media has stopped playing but intends to continue |
文章评论