Browser DOM events

When rendering any mark-up, it is possible to assign standard JavaScript events on the rendered HTML elements so that our own Blazor C# methods are executed. For example, we have used the @onclick Directive in many samples elsewhere:

<button @onclick=ButtonClicked>Click me</button>

These event directives have full IntelliSense support within the Visual Studio editor, so starting to type the @ symbol should present us with a comprehensive list of available directives, along with a description identifying which argument class type the event passes us in our event handler. DOM events start with @on.

Sets the ‘@onabort’ attribute to the provided string or delegate value. A delegate value should be of type ‘Microsoft.AspNetCore.Components.Web.ProgressEventArgs’

Warning: When writing a Blazor app that runs entirely on the server, Blazor will hook events in the browser and send them to server so our C# methods can be invoked. This can lead to a noticeable slow-down for frequently fired events such as onmousemove.

Note: Because JavaScript inocation of C# methods is aynchronous, this means that in C# methods we cannot cancel events as we can in JavaScript. This is because cancelling browser DOM events is a synchronous operation, by the time our C# has been asynchronously invoked it is already too late to cancel the event .

Available DOM events and their parameter types include:

General events

DOM event Argument type
onactivate EventArgs
onbeforeactivate EventArgs
onbeforedeactivate EventArgs
ondeactivate EventArgs
onended EventArgs
onfullscreenchange EventArgs
onfullscreenerror EventArgs
onloadeddata EventArgs
onloadedmetadata EventArgs
onpointerlockchange EventArgs
onpointerlockerror EventArgs
onreadystatechange EventArgs
onscroll EventArgs

Focus events

DOM event Argument type
onfocus FocusEventArgs
onblur FocusEventArgs
onfocusin FocusEventArgs
onfocusout FocusEventArgs

Mouse events

DOM event Argument type
onmouseover MouseEventArgs
onmouseout MouseEventArgs
onmousemove MouseEventArgs
onmousedown MouseEventArgs
onmouseup MouseEventArgs
onclick MouseEventArgs
ondblclick MouseEventArgs
oncontextmenu MouseEventArgs
onwheel WheelEventArgs
onmousewheel WheelEventArgs

Drag events

DOM event Argument type
ondrag DragEventArgs
ondragend DragEventArgs
ondragenter DragEventArgs
ondragleave DragEventArgs
ondragover DragEventArgs
ondragstart DragEventArgs
ondrop DragEventArgs

Keyboard events

DOM event Argument type
onkeydown KeyboardEventArgs
onkeyup KeyboardEventArgs
onkeypress KeyboardEventArgs

Input events

DOM event Argument type
onchange ChangeEventArgs
oninput ChangeEventArgs
oninvalid EventArgs
onreset EventArgs
onselect EventArgs
onselectstart EventArgs
onselectionchange EventArgs
onsubmit EventArgs

Clipboard events

DOM event Argument type
onbeforecopy EventArgs
onbeforecut EventArgs
onbeforepaste EventArgs
oncopy ClipboardEventArgs
oncut ClipboardEventArgs
onpaste ClipboardEventArgs

Touch events

DOM event Argument type
ontouchcancel TouchEventArgs
ontouchend TouchEventArgs
ontouchmove TouchEventArgs
ontouchstart TouchEventArgs
ontouchenter TouchEventArgs
ontouchleave TouchEventArgs

Pointer events

DOM event Argument type
ongotpointercapture PointerEventArgs
onlostpointercapture PointerEventArgs
onpointercancel PointerEventArgs
onpointerdown PointerEventArgs
onpointerenter PointerEventArgs
onpointerleave PointerEventArgs
onpointermove PointerEventArgs
onpointerout PointerEventArgs
onpointerover PointerEventArgs
onpointerup PointerEventArgs

Media events

DOM event Argument type
oncanplay EventArgs
oncanplaythrough EventArgs
oncuechange EventArgs
ondurationchange EventArgs
onemptied EventArgs
onpause EventArgs
onplay EventArgs
onplaying EventArgs
onratechange EventArgs
onseeked EventArgs
onseeking EventArgs
onstalled EventArgs
onstop EventArgs
onsuspend EventArgs
ontimeupdate EventArgs
onvolumechange EventArgs
onwaiting EventArgs

Progress events

DOM event Argument type
onloadstart ProgressEventArgs
ontimeout ProgressEventArgs
onabort ProgressEventArgs
onload ProgressEventArgs
onloadend ProgressEventArgs
onprogress ProgressEventArgs
onerror ErrorEventArgs