Add support for most (if not all events)

This change adds tag helpers and defines event types for all of the DOM
events we could find. You'll find it much easier now to subcribe to
these events.

While we did define new event types, we didn't substantially expand the
set of data that we serialize for events. We're looking for feedback on
what is most critical to have, and looking for contributions adding
those data and tests.

src/Microsoft.AspNetCore.Blazor.Browser.JS/src/Rendering/EventForDotNet.ts

@@ -5,17 +5,66 @@
   static fromDOMEvent(event: Event): EventForDotNet<UIEventArgs> {
     const element = event.target as Element;
     switch (event.type) {
-      case 'click':
-      case 'mousedown':
-      case 'mouseup':
-        return new EventForDotNet<UIMouseEventArgs>('mouse', { Type: event.type });
+
       case 'change': {
         const targetIsCheckbox = isCheckbox(element);
         const newValue = targetIsCheckbox ? !!element['checked'] : element['value'];
         return new EventForDotNet<UIChangeEventArgs>('change', { Type: event.type, Value: newValue });
       }
+
+      case 'copy':
+      case 'cut':
+      case 'paste':
+        return new EventForDotNet<UIClipboardEventArgs>('clipboard', { Type: event.type });
+
+      case 'drag':
+      case 'dragend':
+      case 'dragenter':
+      case 'dragleave':
+      case 'dragover':
+      case 'dragstart':
+      case 'drop':
+        return new EventForDotNet<UIDragEventArgs>('drag', { Type: event.type });
+
+      case 'error':
+        return new EventForDotNet<UIProgressEventArgs>('error', { Type: event.type });
+
+      case 'focus':
+      case 'blur':
+      case 'focusin':
+      case 'focusout':
+        return new EventForDotNet<UIFocusEventArgs>('focus', { Type: event.type });
+
+      case 'keydown':
+      case 'keyup':
       case 'keypress':
         return new EventForDotNet<UIKeyboardEventArgs>('keyboard', { Type: event.type, Key: (event as any).key });
+
+      case 'click':
+      case 'mouseover':
+      case 'mouseout':
+      case 'mousemove':
+      case 'mousedown':
+      case 'mouseup':
+      case 'dblclick':
+        return new EventForDotNet<UIMouseEventArgs>('mouse', { Type: event.type });
+
+      case 'contextmenu':
+        return new EventForDotNet<UIPointerEventArgs>('pointer', { Type: event.type });
+
+      case 'progress':
+        return new EventForDotNet<UIProgressEventArgs>('progress', { Type: event.type });
+
+      case 'touchcancel':
+      case 'touchend':
+      case 'touchmove':
+      case 'touchstart':
+        return new EventForDotNet<UITouchEventArgs>('touch', { Type: event.type });
+
+      case 'mousewheel':
+        return new EventForDotNet<UIWheelEventArgs>('wheel', { Type: event.type });
+
+
       default:
         return new EventForDotNet<UIEventArgs>('unknown', { Type: event.type });
     }
@@ -28,19 +77,43 @@ function isCheckbox(element: Element | null) {
 
 // The following interfaces must be kept in sync with the UIEventArgs C# classes
 
-type EventArgsType = 'mouse' | 'keyboard' | 'change' | 'unknown';
+type EventArgsType = 'change' | 'clipboard' | 'drag' | 'error' | 'focus' | 'keyboard' | 'mouse' | 'pointer' | 'progress' | 'touch' | 'unknown' | 'wheel';
 
 export interface UIEventArgs {
   Type: string;
 }
 
-interface UIMouseEventArgs extends UIEventArgs {
+interface UIChangeEventArgs extends UIEventArgs {
+  Value: string | boolean;
+}
+
+interface UIClipboardEventArgs extends UIEventArgs {
+}
+
+interface UIDragEventArgs extends UIEventArgs {
+}
+
+interface UIErrorEventArgs extends UIEventArgs {
+}
+
+interface UIFocusEventArgs extends UIEventArgs {
 }
 
 interface UIKeyboardEventArgs extends UIEventArgs {
   Key: string;
 }
 
-interface UIChangeEventArgs extends UIEventArgs {
-  Value: string | boolean;
+interface UIMouseEventArgs extends UIEventArgs {
+}
+
+interface UIPointerEventArgs extends UIMouseEventArgs {
+}
+
+interface UIProgressEventArgs extends UIEventArgs {
+}
+
+interface UITouchEventArgs extends UIEventArgs {
+}
+
+interface UIWheelEventArgs extends UIEventArgs {
 }

src/Microsoft.AspNetCore.Blazor.Browser/Rendering/BrowserRendererEventDispatcher.cs

@@ -32,16 +32,32 @@ private static UIEventArgs ParseEventArgsJson(string eventArgsType, string event
         {
             switch (eventArgsType)
             {
-                case "mouse":
-                    return JsonUtil.Deserialize<UIMouseEventArgs>(eventArgsJson);
-                case "keyboard":
-                    return JsonUtil.Deserialize<UIKeyboardEventArgs>(eventArgsJson);
                 case "change":
                     return JsonUtil.Deserialize<UIChangeEventArgs>(eventArgsJson);
+                case "clipboard":
+                    return JsonUtil.Deserialize<UIClipboardEventArgs>(eventArgsJson);
+                case "drag":
+                    return JsonUtil.Deserialize<UIDragEventArgs>(eventArgsJson);
+                case "error":
+                    return JsonUtil.Deserialize<UIErrorEventArgs>(eventArgsJson);
+                case "focus":
+                    return JsonUtil.Deserialize<UIFocusEventArgs>(eventArgsJson);
+                case "keyboard":
+                    return JsonUtil.Deserialize<UIKeyboardEventArgs>(eventArgsJson);
+                case "mouse":
+                    return JsonUtil.Deserialize<UIMouseEventArgs>(eventArgsJson);
+                case "pointer":
+                    return JsonUtil.Deserialize<UIPointerEventArgs>(eventArgsJson);
+                case "progress":
+                    return JsonUtil.Deserialize<UIProgressEventArgs>(eventArgsJson);
+                case "touch":
+                    return JsonUtil.Deserialize<UITouchEventArgs>(eventArgsJson);
                 case "unknown":
                     return JsonUtil.Deserialize<UIEventArgs>(eventArgsJson);
+                case "wheel":
+                    return JsonUtil.Deserialize<UIWheelEventArgs>(eventArgsJson);
                 default:
-                    throw new ArgumentException($"Unsupported value '{eventArgsType}'.", nameof(eventArgsType));
+                     throw new ArgumentException($"Unsupported value '{eventArgsType}'.", nameof(eventArgsType));
             }
         }
 

src/Microsoft.AspNetCore.Blazor/Components/EventHandlers.cs

@@ -9,8 +9,106 @@ namespace Microsoft.AspNetCore.Blazor.Components
     /// Holds <see cref="EventHandler"/> attributes to configure the mappings between event names and
     /// event argument types.
     /// </summary>
-    [EventHandler("onchange", typeof(UIChangeEventArgs))]
+
+    // Focus events
+    [EventHandler("onfocus", typeof(UIFocusEventArgs))]
+    [EventHandler("onblur", typeof(UIFocusEventArgs))]
+    [EventHandler("onfocusin", typeof(UIFocusEventArgs))]
+    [EventHandler("onfocusout", typeof(UIFocusEventArgs))]
+
+    // Mouse events
+    [EventHandler("onmouseover", typeof(UIMouseEventArgs))]
+    [EventHandler("onmouseout", typeof(UIMouseEventArgs))]
+    [EventHandler("onmousemove", typeof(UIMouseEventArgs))]
+    [EventHandler("onmousedown", typeof(UIMouseEventArgs))]
+    [EventHandler("onmouseup", typeof(UIMouseEventArgs))]
     [EventHandler("onclick", typeof(UIMouseEventArgs))]
+    [EventHandler("ondblclick", typeof(UIMouseEventArgs))]
+    [EventHandler("onmousewheel", typeof(UIWheelEventArgs))]
+
+    // Drag events
+    [EventHandler("ondrag", typeof(UIDragEventArgs))]
+    [EventHandler("ondragend", typeof(UIDragEventArgs))]
+    [EventHandler("ondragenter", typeof(UIDragEventArgs))]
+    [EventHandler("ondragleave", typeof(UIDragEventArgs))]
+    [EventHandler("ondragover", typeof(UIDragEventArgs))]
+    [EventHandler("ondragstart", typeof(UIDragEventArgs))]
+    [EventHandler("ondrop", typeof(UIDragEventArgs))]
+
+    // Keyboard events
+    [EventHandler("onkeydown", typeof(UIKeyboardEventArgs))]
+    [EventHandler("onkeyup", typeof(UIKeyboardEventArgs))]
+    [EventHandler("onkeypress", typeof(UIKeyboardEventArgs))]
+
+    // Pointer events
+    [EventHandler("oncontextmenu", typeof(UIPointerEventArgs))]
+
+    // Input events
+    [EventHandler("onchange", typeof(UIChangeEventArgs))]
+    [EventHandler("oninput", typeof(UIEventArgs))]
+    [EventHandler("oninvalid", typeof(UIEventArgs))]
+    [EventHandler("onreset", typeof(UIEventArgs))]
+    [EventHandler("onselect", typeof(UIEventArgs))]
+    [EventHandler("onselectstart", typeof(UIEventArgs))]
+    [EventHandler("onselectionchange", typeof(UIEventArgs))]
+    [EventHandler("onsubmit", typeof(UIEventArgs))]
+
+    // Clipboard events
+    [EventHandler("onbeforecopy", typeof(UIEventArgs))]
+    [EventHandler("onbeforecut", typeof(UIEventArgs))]
+    [EventHandler("onbeforepaste", typeof(UIEventArgs))]
+    [EventHandler("oncopy", typeof(UIClipboardEventArgs))]
+    [EventHandler("oncut", typeof(UIClipboardEventArgs))]
+    [EventHandler("onpaste", typeof(UIClipboardEventArgs))]
+
+    // Touch events 
+    [EventHandler("ontouchcancel", typeof(UITouchEventArgs))]
+    [EventHandler("ontouchend", typeof(UITouchEventArgs))]
+    [EventHandler("ontouchmove", typeof(UITouchEventArgs))]
+    [EventHandler("ontouchstart", typeof(UITouchEventArgs))]
+
+    // Media events
+    [EventHandler("oncanplay", typeof(UIEventArgs))]
+    [EventHandler("oncanplaythrough", typeof(UIEventArgs))]
+    [EventHandler("oncuechange", typeof(UIEventArgs))]
+    [EventHandler("ondurationchange", typeof(UIEventArgs))]
+    [EventHandler("onemptied", typeof(UIEventArgs))]
+    [EventHandler("onpause", typeof(UIEventArgs))]
+    [EventHandler("onplay", typeof(UIEventArgs))]
+    [EventHandler("onplaying", typeof(UIEventArgs))]
+    [EventHandler("onratechange", typeof(UIEventArgs))]
+    [EventHandler("onseeked", typeof(UIEventArgs))]
+    [EventHandler("onseeking", typeof(UIEventArgs))]
+    [EventHandler("onstalled", typeof(UIEventArgs))]
+    [EventHandler("onstop", typeof(UIEventArgs))]
+    [EventHandler("onsuspend", typeof(UIEventArgs))]
+    [EventHandler("ontimeupdate", typeof(UIEventArgs))]
+    [EventHandler("onvolumechange", typeof(UIEventArgs))]
+    [EventHandler("onwaiting", typeof(UIEventArgs))]
+
+    // Error events
+    [EventHandler("onerror", typeof(UIErrorEventArgs))]
+
+    // Progress events
+    [EventHandler("onprogress", typeof(UIProgressEventArgs))]
+
+    // General events
+    [EventHandler("onabort", typeof(UIEventArgs))]
+    [EventHandler("onactivate", typeof(UIEventArgs))]
+    [EventHandler("onbeforeactivate", typeof(UIEventArgs))]
+    [EventHandler("onbeforedeactivate", typeof(UIEventArgs))]
+    [EventHandler("ondeactivate", typeof(UIEventArgs))]
+    [EventHandler("onended", typeof(UIEventArgs))]
+    [EventHandler("onfullscreenchange", typeof(UIEventArgs))]
+    [EventHandler("onfullscreenerror", typeof(UIEventArgs))]
+    [EventHandler("onload", typeof(UIEventArgs))]
+    [EventHandler("onloadeddata", typeof(UIEventArgs))]
+    [EventHandler("onloadedmetadata", typeof(UIEventArgs))]
+    [EventHandler("onloadstart", typeof(UIEventArgs))]
+    [EventHandler("onpointerlockchange", typeof(UIEventArgs))]
+    [EventHandler("onpointerlockerror", typeof(UIEventArgs))]
+    [EventHandler("onreadystatechange", typeof(UIEventArgs))]
+    [EventHandler("onscroll", typeof(UIEventArgs))]
     public static class EventHandlers
     {
     }

src/Microsoft.AspNetCore.Blazor/UIEventArgs.cs

@@ -26,6 +26,36 @@ public class UIChangeEventArgs : UIEventArgs
         public object Value { get; set; }
     }
 
+    /// <summary>
+    /// Supplies information about an clipboard event that is being raised.
+    /// </summary>
+    public class UIClipboardEventArgs : UIEventArgs
+    {
+    }
+
+    /// <summary>
+    /// Supplies information about an drag event that is being raised.
+    /// </summary>
+    public class UIDragEventArgs : UIEventArgs
+    {
+    }
+
+    /// <summary>
+    /// Supplies information about an error event that is being raised.
+    /// </summary>
+    public class UIErrorEventArgs : UIEventArgs
+    {
+    }
+
+    /// <summary>
+    /// Supplies information about a focus event that is being raised.
+    /// </summary>
+    public class UIFocusEventArgs : UIEventArgs
+    {
+        // Not including support for 'relatedTarget' since we don't have a good way to represent it.
+        // see: https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent
+    }
+
     /// <summary>
     /// Supplies information about a keyboard event that is being raised.
     /// </summary>
@@ -43,4 +73,32 @@ public class UIKeyboardEventArgs : UIEventArgs
     public class UIMouseEventArgs : UIEventArgs
     {
     }
+
+    /// <summary>
+    /// Supplies information about a mouse event that is being raised.
+    /// </summary>
+    public class UIPointerEventArgs : UIMouseEventArgs
+    {
+    }
+
+    /// <summary>
+    /// Supplies information about a progress event that is being raised.
+    /// </summary>
+    public class UIProgressEventArgs : UIMouseEventArgs
+    {
+    }
+
+    /// <summary>
+    /// Supplies information about a touch event that is being raised.
+    /// </summary>
+    public class UITouchEventArgs : UIEventArgs
+    {
+    }
+
+    /// <summary>
+    /// Supplies information about a mouse wheel event that is being raised.
+    /// </summary>
+    public class UIWheelEventArgs : UIEventArgs
+    {
+    }
 }