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.
Related
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 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.
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.
When I'm writing some JavaScript I have a set of interface buttons that have their events assigned when the page is loaded. My problem is anything created dynamically wont receive these events.
For example, I'm making a URL checker, whose job is to make sure that any link that goes to another domain brings up an exit interface letting the user know they are leaving. Any links created after the page is loaded, post ajax (no pun intended) or whatever wont have that event naturally as those that existed when the page loaded.
In practice, what's the best way to ensure any newly created items get these sorts of global events?
I like to use jQuery, but this is really a conceptual question.
Should I create a function to re-apply any global link effects, or is there a smarter way besides doing it piecemeal?
If using jQuery, you can use the .live() method.
Normally when binding an event handler, the event handler is bound to a specific set of elements. Elements added in the future do not receive the event handler unless it is re-bound.
jQuery's .live() method works around this by binding its own special event handler to the root of the DOM tree (relying on event bubbling). When you click on an element, if it has no event handler directly attached, the event bubbles up the DOM tree. jQuery's special event handler catches the event, looks at its target and executes any user-specified event handlers that were assigned to the target through .live().
Look into jQuery's live function. It will allow you to attach to events when control are created during load, and whenever new ones are created. There is a performance penalty, but it is not significant unless you are loading a lot of elements.
You can use the .live() jQuery method to add listeners to elements that are created after the page is finished loading. Using your example of the exit link (if I understand it correctly):
$(function(){
$('a.exitLink').live('click',function(event){ /* do stuff when a link of class exitLink is clicked */);
});
This will respond to the click event on any link of class exitLink, regardless of when it was created (before or after onload fires).
Hope this helps :)
Yes put simply, where you might have had this before:
$('selector').click(function () {});
Replace it with:
$('selector').live('click', function() {});
The following codes don't work:
function dnd(){
}
var ele = document.getElementById("relative");
ele.addEventListener("click",dnd,false);
document.write(ele.onclick);
the output is undefined. I guess the output should be function onclick(event){dnd();}
What should I do to solve this problem?
Any suggestion is appreciated.
There are 3 common ways to attach events to DOM nodes.
The addEventListener() method is the way to register an event listener as specified in W3C DOM. It has many benefits, but doesn't work in Internet Explorer. For Internet Explorer you'd have to use the attachEvent() method, which offers similar functionality.
On the other hand, the onclick property is an older, but more supported way to attach event handlers. However it has certain disadvantages, such as allowing just one event handler for each event.
As for how to get back the event handlers that are attached to a particular node, it depends on the method you use to attach the events. The problem with your example is that you're using the addEventListener() method to attach the event, and then trying to read it using the onclick property.
You may want to check out the following Stack Overflow post for further reading into this topic, especially the post by #Crescent Fresh:
How to find event listeners on a DOM node?
The onclick property is only going to show you an event handler if it is registered inline via the markup (e.g, <div id="relative" onclick="alert('foo');"></div>).
Why do you need to read the event handler? This is a relatively strange thing to do...
There are different ways of establishing event handlers, and they use different mechanisms inside the DOM. In particular — and as you've discovered empirically — adding an event listener via "addEventListener" does not affect the "onclick" attribute of the element. The mechanisms are simply separate.
This is one of the current limitation of W3C event registration model. if you register using JS methods then there is no standard way to get the handlers.
Latest DOM LEVEL 3 Events W3C adds eventListenerList spec. i guess we are lacking of some close support for this API across browsers.
Of-course if you add your method using tradition way
then your example would work.
Some StackOverFlow Links
link text