Blazor WASM Event Handling And Event Arguments

Blazor WASM Event Handling And Event Arguments

blazor

20 Articles

Improve

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.

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}"

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 General
onactivate, 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.

  • Blazor
  • Event Hadling
  • Event Arguments