Blazor WASM Event Handling And Event Arguments
blazor
24 Articles
In previous article, we learnt what is components in blazor. if you are new to blazor, I strongly recommend you to check out my article on Blazor Wasm Introduction and Blazor Wasm Components. If you are familiar with blazor and components, you can skip introdution and continue with this article.
Table of Contents
Why Event Handling in blazor components?
Event Handling in blazor components helps us to bring interactivity in our blazor applications. What should happen when a user clicks on a
button or when the user hovers on element inside a component? we can run a form submit event on click of button or show an alert on click of button or animate a element inside
component when the users hovers on the element, etc. We can do all these with the help of event handlers in blazor components.
The razor syntax for that is @on{DOM EVENT}="{DELEGATE}"
-
The
{DOM EVENT}placeholder is a Document Object Model (DOM) event (for example, click). - The
{DELEGATE}placeholder is the C# delegate event handler.
Code Sample - Blazor WASM Event Handling
Demo - Event Handling
Scenario - Let's try a simple @onclick and @onchange. Click on the button and checkbox to see
how event handler works.
I ❤️ .NET
Event arguments
For events that support an event argument type, specifying an event parameter in the event method definition is only necessary if the event type is used in the method. In the
following example, MouseEventArgs is used in the ReportPointerLocation method to set message text that reports the mouse coordinates when the
user selects a button in the UI.
Code Sample - Blazor WASM Event Arguments
Demo - Event Arguments
The following demo shows how to use MouseEventArgs to report mouse coordinates.
Here are the list of supported event arguments:
| Event | Class | Document Object Model (DOM) events and notes |
|---|---|---|
| Clipboard | ClipboardEventArgs | oncut, oncopy, onpaste |
| Drag | DragEventArgs | ondrag, ondragstart, ondragenter, ondragleave, ondragover, ondrop, ondragendDataTransfer and DataTransferItem hold dragged item data. Implement drag and drop in Blazor apps using JS interop with HTML Drag and Drop API |
| Error | ErrorEventArgs | onerror |
| Event | EventArgs | Generalonactivate, onbeforeactivate, onbeforedeactivate, ondeactivate, onfullscreenchange, onfullscreenerror, onloadeddata, onloadedmetadata, onpointerlockchange, onpointerlockerror, onreadystatechange, onscrollClipboard onbeforecut, onbeforecopy, onbeforepasteInput oninvalid, onreset, onselect, onselectionchange, onselectstart, onsubmitMedia oncanplay, oncanplaythrough, oncuechange, ondurationchange, onemptied, onended, onpause, onplay, onplaying, onratechange, onseeked, onseeking, onstalled, onstop, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaitingEventHandlers holds attributes to configure the mappings between event names and event argument types. |
| Focus | FocusEventArgs | onfocus, onblur, onfocusin, onfocusoutDoesn't include support for relatedTarget.
|
| Input | ChangeEventArgs | onchange, oninput |
| Keyboard | KeyboardEventArgs | onkeydown, onkeypress, onkeyup |
| Mouse | MouseEventArgs | onclick, oncontextmenu, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout |
| Mouse pointer | PointerEventArgs | onpointerdown, onpointerup, onpointercancel, onpointermove, onpointerover, onpointerout, onpointerenter, onpointerleave, ongotpointercapture, onlostpointercapture |
| Mouse wheel | WheelEventArgs | onwheel, onmousewheel |
| Progress | ProgressEventArgs | onabort, onload, onloadend, onloadstart, onprogress, ontimeout |
| Touch | TouchEventArgs | ontouchstart, ontouchend, ontouchmove, ontouchenter, ontouchleave, ontouchcancelTouchPoint represents a single contact point on a touch-sensitive device. |
Summary
In this article, we learn't about what is event handling in blazor components and experienced a live demo. In our next article let's learn about what is event callback and how to communicate between components.