We Keep Coding

Capture custom Javascript events in Blazor WASM

I am working on a Blazor WASM project where we are using an internal HTML/JS library (a requirement that I can't get around). This library has custom events on it's components that often replace standard events. For example, the <select> control has a valuechanged event that takes the place of a standard change event (the change event is no longer emitted for this custom <select>). It also has completely custom events, such as a sort event on its <table> element.
I need to be able to work with these events, but so far have not been able to. I've tried to follow the guide here: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-6.0#custom-event-arguments, and gotten it set up correctly I believe (because intellisense recognizes the #on____ line), but the code to execute on those events never gets called. I'm not sure if that's because I don't have a browserEventName, or for some other reason. I've also tried the instructions here: https://stackoverflow.com/a/67595043, but again, have not had any success.
Is there a way to wire up listeners/actions to the custom events emitted in the library? The closest I've been able to find on SO to my specific issue is an unanswered question from a few years ago: How to retrieve Web Component custom event result with Blazor.

Does Google Chrome MonitorEvent support custom events?

Simple question. I would like to monitor every time a custom event ('connect") is fired.
As per How do I view events fired on an element in Chrome DevTools? and http://www.briangrinstead.com/blog/chrome-developer-tools-monitorevents, I can use MonitorEvent to monitor events in chrome. However, I am not sure if this supports custom events?
For example, I have a custom event bound by jQuery using $(document).bind('connect', function (ev, data) {//code here;});
but if I type monitorEvents($0, 'connect') into the console
I don't see any monitored events, even though the event is most definitely triggered in my code.
Thanks!
C

monitorEvents isn't part of the jQuery library so it won't catch the bespoke events... it is part of the console object and therefore only 'sees' proper browser events.
I recommend you look up how custom jQuery events work and create your own logger, at least with jQuery it's easy, just set a event listener on the document.

How does JQuery create it's Custom Events and can I recreate in Javascript?

I am looking to create events in Javascript using the same methodology as JQuery- Does anyone know how JQuery does it?
My reasoning is that using raw Javascript such this:
var myEvent = new CustomEvent("userLogin", eventProperties);
...does not actually work on Android native browser, as it does not support DOM Level 3 like Chrome and other browsers do.
However, JQuery does work on Android's stock browser, and simply uses:
$.event.trigger('MyEvent');
My question is, what is the code behind this? I tried to find it by going through JQuery's source code, but cannot get my head around it!

The fundamental thing here is this: When you hook an event handler up with jQuery, jQuery doesn't directly add that handler to the DOM element. Instead, jQuery hooks up a handler of its own on the DOM element (if it doesn't already have one on it). When the event occurs, jQuery looks at the list of jQuery-registered handlers for the event and fires them in order. (There are several reasons for this; initially it was primarily around IE memory leaks and the fact that IE fired handlers in one order, and everyone else in a different order; so jQuery took over and ensured the order.)
(You might be able to see where I'm going with this...)
So when you use trigger, jQuery sends the synthetic event to the DOM element, but it doesn't rely on that synthetic event to work; it calls the handlers you've registered through jQuery directly. In fact, it sets a flag so that it knows that it's done that, so if the browser does send the event to jQuery's handler for it, jQuery knows to ignore it (since it's already done its work).
You can see this in all its glory starting with line 4,464 of the current uncompressed jQuery file.
So basically jQuery's build its own pub/sub system, and only uses the browser event system as an input to it. So custom events don't usually have to talk to the browser at all.

Trigger global touch/click events in javascript without specific target

Since I'm searching for an answer for a while now and I'm still without any clue, I'll just describe my actual problem:
I need to build up automated touch/mouse gestures (tap,drag,pinch...) which I can fire on a webpage in order to test touch frameworks and their performance. Thus I want to trigger "global" touch/mouse events on a webpage with JavaScript without dispatching them from a specific element.
Does anyone know how I could achieve this or how these events are delegated in general?

If you need this just for the sake of emulating mobile touch actions on your browser, Chrome already has a tool for that. Check out Mobile Emulation.

Where to get the list of event types?

The official documentation only says:
The event's type, such as "click", "blur" or "keypress".
For iOS devices the touchstart is another event which is working. Where can I get the full list of all possible events? I like for example actually to get the event for the <select> event hasChanged(). Is this based on another library?

Meteor doesn't define the events it supports — it simply creates a cross-browser event listener wrapper. If you wanted to create custom events and trigger them, Meteor would pick them up.
The native input events supported depends on the browser: the Mozilla Developer Network reference is a good place to start.

Th docs also says that all the DOM events are also possible in addition to click, focus, blur, etc.
Other DOM events are available as well, but for the events above,
Meteor has taken some care to ensure that they work uniformly in all
browsers.
You can see the list of available Javascript events here and here.