👉🏼 Click here to Join I ❤️ .NET WhatsApp Channel to get 🔔 notified about new articles and other updates.
Blazor WASM Event Handling And Event Arguments

Blazor WASM Event Handling And Event Arguments


27 Articles


In this article, lets learn about Event Handling and Event Arguments in blazor wasm apps.

Note: If you have not done so already, I recommend you read the article on Blazor WASM Data Binding.

Table of Contents

  1. Why Event Handling in blazor components?
  2. Event arguments
  3. Summary

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

onbeforecut, onbeforecopy, onbeforepaste

oninvalid, onreset, onselect, onselectionchange, onselectstart, onsubmit

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.


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.

👉🏼 Click here to Join I ❤️ .NET WhatsApp Channel to get 🔔 notified about new articles and other updates.
  • Blazor
  • Event Hadling
  • Event Arguments