
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 , ondragend DataTransfer 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 , onscroll Clipboard onbeforecut , onbeforecopy , onbeforepaste Input oninvalid , onreset , onselect , onselectionchange , onselectstart , onsubmit Media oncanplay , oncanplaythrough , oncuechange , ondurationchange , onemptied , onended , onpause , onplay , onplaying , onratechange , onseeked , onseeking , onstalled , onstop , onsuspend , ontimeupdate , ontoggle , onvolumechange , onwaiting EventHandlers holds attributes to configure the mappings between event names and event argument types. |
Focus | FocusEventArgs | onfocus , onblur , onfocusin , onfocusout Doesn'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 , ontouchcancel TouchPoint 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.