Add more special-case event types

[rynowak]

We need to add support for more kinds of strongly typed events to the Blazor library, and then add more mappings for tooling support.

We're considering these lists of event types as a starting point for what we want to include as first class events.
https://github.com/Microsoft/TypeScript/blob/master/lib/lib.dom.d.ts#L3475
https://github.com/Microsoft/TypeScript/blob/master/lib/lib.dom.d.ts#L5472

First, we're eliminating anything that is vendor specific. That's all of the stuff with MS or webkit. This items tracks our progress as well as future work. Note that you aren't blocked for using these events just because we haven't added them. This just makes it a little nicer.

In 0.3 we've added the basic plumbing for these events as well as defined new UIEventArgs-derived classes where needed. However we didn't try to add all of the relevant data to these classes. If you look at an example like https://github.com/aspnet/Blazor/blob/dev/src/Microsoft.AspNetCore.Blazor/UIEventArgs.cs#L32 - we don't include the dataType and data - https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/ClipboardEvent

We'd be super interested in contributions to help fill out these data types as well as to add tests where they are missing and possible to add.

Note also that in 0.3 the path has been cleared for you to handle arbitrary events as long as you don't need to pass any data through the event.

Added in 0.3:

    "abort": UIEvent;
    "activate": Event;
    "beforeactivate": Event;
    "beforecopy": Event;
    "beforecut": Event;
    "beforedeactivate": Event;
    "beforepaste": Event;
    "canplay": Event;
    "canplaythrough": Event;
    "change": Event;
    "click": MouseEvent;
    "contextmenu": PointerEvent;
    "copy": ClipboardEvent;
    "cuechange": Event;
    "cut": ClipboardEvent;
    "dblclick": MouseEvent;
    "deactivate": Event;
    "drag": DragEvent;
    "dragend": DragEvent;
    "dragenter": DragEvent;
    "dragleave": DragEvent;
    "dragover": DragEvent;
    "dragstart": DragEvent;
    "drop": DragEvent;
    "durationchange": Event;
    "emptied": Event;
    "ended": Event;
    "error": ErrorEvent;
    "fullscreenchange": Event;
    "fullscreenerror": Event;
    "input": Event;
    "invalid": Event;
    "keydown": KeyboardEvent;
    "keypress": KeyboardEvent;
    "keyup": KeyboardEvent;
    "load": Event;
    "loadeddata": Event;
    "loadedmetadata": Event;
    "loadstart": Event;
    "mouseenter": MouseEvent;
    "mouseleave": MouseEvent;
    "mousewheel": WheelEvent;
    "paste": ClipboardEvent;
    "pause": Event;
    "play": Event;
    "playing": Event;
    "pointerlockchange": Event;
    "pointerlockerror": Event;
    "progress": ProgressEvent;
    "ratechange": Event;
    "readystatechange": Event;
    "reset": Event;
    "scroll": UIEvent;
    "seeked": Event;
    "seeking": Event;
    "select": UIEvent;
    "selectionchange": Event;
    "selectstart": Event;
    "stalled": Event;
    "stop": Event;
    "submit": Event;
    "suspend": Event;
    "timeupdate": Event;
    "touchcancel": TouchEvent;
    "touchend": TouchEvent;
    "touchmove": TouchEvent;
    "touchstart": TouchEvent;
    "volumechange": Event;
    "waiting": Event;
}

[miroslavp]

@rynowak Can you please also add "mouseenter" and "mouseleave"?

[wilka]

This looks like the ideal case to have a tool (possibly as a build step) that takes that TypeScript and builds some C# we can include in Blazor.

[danroth27]

Some progress here: https://github.com/mono/TsToCSharp

[rynowak]

Note that we made some more progress here, adding the details of:

• UIDragEventArgs
• UIKeyboardEventArgs
• UIMouseEventArgs
• UIPointerEventArgs
• UIProgressEventArgs
• UITouchEventArgs
• UIWheelEventArgs

[SteveSandersonMS]

@rynowak Do you anticipate we'll do more event types in 0.4.0, or should we move this issue out to backlog now that the bulk are covered?

[rynowak]

I think we should backlog this. We can add more as we get feedback or as folks are willing to send PRs.

[Sire]

Having a Sender in the EventArgs would be very useful. Is this something that is being considered?
There's been a number of requests for this previously.

[SteveSandersonMS]

What value should be supplied for "Sender"?

We haven't done it only because it's not clear what that would even mean. Instead, the normal way to track who's calling an event handler is to use a lambda to call it, e.g.:

<button onclick="@(() => CallSomeMethod(someVariableFromContextRepresentingSender))">

[chucker]

What value should be supplied for "Sender"?

I would expect sender to be an ElementRef.

[SteveSandersonMS]

What would you then do with the ElementRef? If it's to then make further interop calls to read attributes from the element, I'm not sure that would be anywhere near as clean as using the lambdas.

[vertonghenb]

@SteveSandersonMS I can be wrong but I believe that the lamda doesn't cover all the cases. For example the one we're currently having in Blazorstrap : chanan/BlazorStrap#7

The issue is with onblur or onfocusout for a dropdown component.

The use case in short:
You have a dropdown menu component, if a random click occurs on any component you want to close the dropdown menu (onfocusout) but only if it's not coming from any of the children of the dropdown, since else you'll close the dropdown before the onclick action of the child a button, link or <li> can take place.

I don't really see an alternative at the moment.

[miroslavp]

@rynowak
Hey Ryan,
An year ago I asked if you can add onmouseenter and onmouseleave events. According to your post, they should be there, but in reality, they are not. We have only onmouseover and onmouseout. Any chance to add those in the next preview?

[Tragetaschen]

Would it be possible to add extension points that make custom events available?

[daniatic]

I landed here looking for a way to add the transitionend event to an element, but I only could find the list of "natively"supported events and that "arbitrary events" are being worked on. How is the state on this? Is the only way to bind to unsupported events by using JSInterop?

[danielxbauer]

As @miroslavp mentioned: onmouseenter and onmouseleave events are not available in the latest version, which is a pity. I wonder if there is a technical reason behind it?

[mkArtakMSFT]

We'll be covering this as part of #17552