Does Google Chrome MonitorEvent support custom events? - javascript

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.

Related

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.

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.

How to trigger an event attached with dojoAttachEvent?

Let's say I have an element on a web page created via a dojo widget that has events attached using dojoAttachEvent that looks like so:
<span id="menuItemIWantToTrigger" dojoattachevent="onMouseOver: onHover; onMouseOut: onUnhover; onClick: _onClick;" class="dojoMenuItem2" style="-moz-user-select: none;" dojoinsertionindex="4">Workflow... </span>
I need a click on another element on the page to trigger the onClick event on the widget element. In Firefox 5, I can remotely trigger the event using the plain old JavaScript .click() method, like so:
document.getElementById('menuItemIWantToTrigger').click();
In other browsers (like Firefox 3.6 and 4), that method doesn't work. It seems that those browsers don't pass the triggered click event onto the widget's dojoAttachEvent handlers, but Firefox 5 (and, weirdly, IE 7) do; in fact, those browsers seem to handle dojoAttachEvents exactly like plain old DOM events. So, is there any way I can trigger the onClick dojoAttachEvent in all browsers the same way I can trigger it in Firefox 5?
An important note: I don't have access to the code that's creating the dojo widget elements, so I can't rewrite the way events are bound.
You need to programatically create an Event object and invoke the event dispatcher on the document. Unfortunately, how you do that is browser dependent.
See this question: How to generate a right-click event in all browsers
and this answer (to another question) for a generic solution on event dispatching.
Another, cleaner and better solution, would be to invoke the handler function directly. But I don't know if you have access to it.

How can I monitor all custom events emitted in the browser?

I'd like to monitor all custom events fired within a web browser. Any standard browser will do.
To be clear, I know you can attach event handlers to see when "usual" events are fired, but how can I reliably detect if an embedded object or jQuery script fires a custom event?
I could refactor the browser source code to hook the event loop, but that seems rather extreme.
I'd like to monitor all custom events fired within a web browser.
I don't think you can. The DOM event model works by setting listeners for specific event types, so if you don't know the type of the event, you can't listen for it. There is no way to listen for all events, e.g. there is no addEventListener('*',...).
Also, you don't know how custom events are called. They may not dispatch an event into the DOM (e.g. some libraries implement their own event registration and handling systems) so there is no general way of knowing when event listeners are being called, even if you can track the dispatch of the event.
Some libraries also simulate event bubbling, but again, unless you know the type of event, you can't listen for it.
However, you could implement your own event management system and implement a function to listen for all events for which listeners are set or events dispatched using your system.

How to bind and trigger custom and native events in YUI?

I'm trying to bind and trigger the following events using YUI, however so far none of the events seem to fire when I trigger them.
My code to bind:
YUI().use('node-base', function(Y){
Y.one(el).on(event,callback);
});
My code to trigger:
YUI().use('node-event-simulate', function(Y){
Y.one(el).simulate(event);
});
The event variable can be any of the following strings:
statechange (custom event)
anchorchange (custom event)
hashchange (sometimes a native event, depends on browser features)
popstate (sometimes a native event, depends on browser features)
The el variable is usually the window dom element, though may also be selectors and other dom elements.
Here is my current attempt to get it working in YUI:
http://jsfiddle.net/balupton/tFbum/
Here is what I want working in jQuery: http://jsfiddle.net/balupton/862Lg/
Thanks guys :-)
Looks like it is currently impossible.

Categories