- The Book of Dojo
- Quick Installation
- Hello World
- Debugging Tutorial
- Introduction
- Part 1: Life With Dojo
- Part 2: Dijit
- Part 3: JavaScript With Dojo and Dijit
- Part 4: Testing, Tuning and Debugging
- Part 5: DojoX
- The Dojo Book, 0.4
The Event System
Submitted by MattBowen on Sat, 05/12/2007 - 21:19.
Dojo's event system offers a refreshing alternative to the normal JavaScript events. With Dojo, you connect functions to one another, creating a link that calls one function when another fires. This means that you can connect a function of your own to
- a DOM event, such as when a link is clicked;
- an event of an object, such as an animation starting or stopping;
- a function call of your own, such as bar();
- a topic, which acts as a queue that other objects can publish objects to.
Your connected function is called when the event occurs. With simple events, when it calls your function, dojo passes your function a normalized event object, so that it can respond correctly, responding to keystrokes or stopping default behavior. With topics, Dojo passes any subscribed functions the object that was published. Dojo happily abstracts away all of the difficulty of cross-browser event systems, offering programmers a coherent event system that acts consistently across browsers.
Dojo's event system is flexible and gives you a few options for connecting your functions. In the core package, you have both simple events (which use a signal and slot system, similar to Qt's) and topics. In this section, you'll learn the following:
- how to connect functions to one another with dojo.connect,
- what comes with an event object
- how to connect functions with topics and even publish your own objects to the topic
- how to enjoy event-based programming
- Printer-friendly version
- Login or register to post comments
- Unsubscribe post
Connecting Dijit events versus Dojo events.
Using dojo.connect with Dijit widgets can be frustrating because of the (IMHO subtle) distinction between dojo.byId and dijit.byId.
Often dijit creates new DOM nodes with a distinct id and events are attached to these nodes instead of the intended node. In some case a DOM node of id='id' doesn't exist in which case dojo.byId returns null and dojo.connect attached the event to nothing (all without complaint).
In the example below
dojo.connect(dijit.byId('middle'),'onclick',function to connect);
connects to the div labeled widgetid='middle' which is where mouse events are connected for a dojo.form.button
where as:
dojo.connect(dojo.byId('middle'),'onclick',function to connect);
connects to the actual HMTL button (id='middle') which will never be called since the surrounding "div" (widgetid="middle") intercepts the mouse events.
Example HTML code:
</span></div>
Produces this html:
<div class="dijitRight">
<button class="dijitStretch dijitButtonNode dijitButtonContents" disabled="false" dojoattachpoint="focusNode,titleNode"
id="middle" labelledby="middle_label" name="" role="wairole:button" tabindex="0" type="button"
valuenow="" wairole="button" waistate="labelledby-middle_label">
<div class="dijitInline myIcon myInfo">
<span class="dijitButtonText" dojoattachpoint="containerNode" id="middle_label">
<span>
</span>
</span>
</div>
</button>
</div>
</div>
I believe this is the source of the "dijit" verus "dojo" event confusion. Unless the user studies the source and the output html extensively this is confusing.
Rule of thumb always identify dijit objects with dijit.byId and non-dijit objects (dojo objects or DOM nodes) with dojo.byId
Regards
Steve
When you think about it...
dojo.byId() has always been shorthand for document.getElementById(), it has nothing to do with Dojo really other than that we also allow full domNodes to be passed to dojo.byId() (it just returns what you passed it in that case)...
To summarize how things have been since dojo 0.1/0.2 time....
-- use dojo.byId if you would have normally used document.getElementById()
-- use dijit.byId if you need the access any functions/properties of a widget
-- dom events are lowercase, all dojo/dijit events/functions are camelCased (ie: 'onClick' == dijit onClick stub 'onclick' == dom node onclick stub
-Karl
Cross Browser Support "onmouseenter" and "onmouseleave"?
Hi,
I noticed some of the tests in dojox.fx use dojo.connect() to register for "onmouseenter" events. I was wondering whether dojo has cross browser support for onmouseenter and onmouseleave and whether tests exist that check the semantics of these?
According to quirksmode (Not sure how up to date this is) the events are MS only:
http://www.quirksmode.org/js/events_mouse.html
However the tests run fine in firefox, so it seems that dojo has the support, so if someone could verify that would be terrific.
Thanks,
- Ole