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.
Related
I am working on converting some of our code base away from jQuery. Up until we got to events, everything was going pretty smoothly. We have a lot of namespaced code with jQuery, and so for now we are not converting the trigger function calls away from jQuery. However, we are trying to use js event listeners. Here is problem with custom events:
window.addEventListener("testevent", function(e){
console.log("js fired"); // this doesn't log, but it should!
});
$(window).on("testevent", function(e){
console.log("jquery listener fired"); // this logs fine, like it should
});
// trigger the custom event with jQuery
$(window).trigger("testevent");
If I run the code above in console, I get a log for the jQuery listener, but not the listener. Does anyone know why that is happening?
jQuery custom events are meant to be used to perform abstractions and simplifications, or to provide more meaning to some event just called click.
Furtheremore, these custom events are triggered by jQuery and can be only listened by jQuery.on. DOM event listeners will listen DOM events (i.e. ones defined by the W3C's standard).
According to the documentation, .trigger() executes any event handlers with the corresponding event. It also says that .trigger() only simulates an event and does not perfectly replicate a naturally-occurring event.
You'll see that they both work if you use window.dispatchEvent(new Event("testevent")) to fire a real event.
Similar question answered here
jQuery events are a level higher than the native events. Trigger fakes
a jQuery event.
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.
I'm trying the greasemonkey extension for Firefox in order to override some JavaScript events on the websites I visit.
For instance, I want to display a message when the blur event has been bound to the window element, whatever the page I visit.
I thought it was pretty easy. But it is much harder to make this working on every case, because depending on the library the website uses, the JavaScript events seems to be stored in different places.
Here is a test I have made in a greasemonkey user script :
window.onload = function(event) {
// Handle pure JS
if (window.onblur) {
console.log('There is a blur event on the window element of this page');
}
// Handle jQuery
if (window.jQuery) {
var jExpando = window[window.jQuery.expando];
if (jExpando.events.blur) {
console.log('There is a blur jQuery event on the window element of this page');
}
}
}
This works on every page that uses pure JavaScript or jQuery, but I'm not able to catch blur events listeners of other libraries such as Mootools, Prototype...
Thus, this is pretty bad code, considering I have to handle all the existing JavaScript libraries myself and I have no idea how to do that.
Is there a way to get all event listeners bind on a specific JavaScript object (whatever the library used to attached them) so I can override some of them?
Most libraries use addEventListener, so you'll want to override that with a function of your own. Be sure to keep a reference to the original addEventListener method so the events can still be added.
I have an example Greasemonkey script here: http://userscripts.org/scripts/show/174829
It will listen to all events and tell you which ones were added. Obviously, you can modify this to make 'blur' events not register.
Does anyone have a link to a list of ALL events that can be passed to jQuery .on()?
Here are a few, but I cant seem to find a definitive list.
click
mouseenter
mouseleave
contextmenu (works on right click, and tap and hold with Android (not iOS))
focus
blur
focusin
focusout
scroll
I'm looking for Android/iOS touch events in particular.
Thanks!
EDIT 1: So I think the real question i'm asking is what events are standard across all browsers/devices?
I think you have to realise that the important question is not: What events can you pass to jQuery.on()? Because you can technically pass any event to that method.
The real question is, what events does the browser/device fire? Obviously, some events — as the ones you listed — are a standard, but some browsers will surprise you by not firing some events or by having their own custom events.
You can find a pretty extensive list at the MDN:
Events reference
But keep in mind that the point is that you can also define your own custom events, trigger them, and bind event listeners to them.
For touch screen devices you will have the following events:
touchstart
touchend
touchmove
touchcancel
Are you using jQuery mobile? The events are listed here: http://api.jquerymobile.com/category/events/
Google DOM Events, get MDN Event Reference.
You may be particularly interested in the TouchEvent subclass.
Of course, you can bind any custom event using .on and trigger any custom event with .trigger, so the real answer is infinite.
You can register any event names. Whether they will be called is another question… Custom events can be manually triggered, and there are many that are triggered natively in the DOM. For some of them, jQuery has special shorthand methods.
I'm looking for Android/iOS touch events in particular.
Have a look at https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Touch_events then, or the W3 spec.
All jQuery events.
Here are lists of keyboard events and mouse events.
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.