DOM Versus Dijit Events
All of the events that we have looked at so far are what you would call DOM
events. That is, they are created by a page element. They include events such
as onchange, onclick, onmouseover, onmouseout, onfocus, onblur, to name a few.
Speaking of which, Dojo also includes two special mouse events:
- onmouseenter: a normalized version of
onmouseoverthat fires only once on first enter. - onmouseleave: a normalized version of
onmouseoutthat fires only once when leaving.
Dojo's widgets (called Dijits) fire their own events. The reason? It's because Dojo widgets are often comprised of many DOM nodes and/or form elements. Therefore, when you connect to a DOM node's event, it is unlikely to be the event that you're actually looking for! Take a combobox for instance. The Dijit version is made up of two distinct components: a textbox and a list element. The underlying node structure in the document is changed a great deal to convert a regular Form control into a widget. You can see for yourself by viewing the page source in Firebug:
Before parsing:
The Dijit control clearly has a more complex DOM structure. The above code
generates a CheckedMultiSelect control, which looks like this in the browser:
Figure 1: Chained Select Boxes Before and After Parsing
Unlike DOM events, which use lowercase names, Dijit uses mixed-case event names.
Hence, onchange becomes onChange and onblur becomes onBlur.
So keep your life simple and always use the camel (mixed) case event names when connecting code to Dojo widgets!
Connecting to Events Declaratively
Script blocks can be contained within a declaratively created Dojo widget's
opening and closing tags. Doing so offers a couple of advantages over regular
JavaScript blocks. For instance, setting the type to "dojo/connect" lets us
delay execution of the script block because the browser will skip scripts of
unrecognized type (unlike text/javascript). Furthermore, in regular
<SCRIPT> tags, the this pointer contains a reference to the global window
object regardless of the script's location in the document.
In a Dojo script block, the this pointer refers to the enclosing object.
Here is some code to connect to a ContentPane's onClick event:
Referencing the Event Object
The Event object possesses a number of useful properties that you may want
to refer to in your listener code. Examples include event.target (the element
that generated the event) and event.charCode (for keypress events, the character
code of the key pressed). Dojo passes your function a normalized event object,
free of browser-related idiosyncrasies.
Dojo even normalizes some entire methods:
- preventDefault: Prevents an event's default behavior (e.g., a link from loading a new page)
- event.stopPropagation: Prevents an event from triggering a parent node's event
The following example will suppress browser navigation on a form submit action
but will still allow event bubbling:
Even easier, you can use dojo.stopEvent(event) to prevent both the default
behavior and any propagation (bubbling) of an event:
We covered a lot of information today, but if you require more specific details, such as the full listing of event types and properties, a couple of useful references follow below.
References
Have a suggestion for an article topic? Do you have a product or service that you'd like reviewed? Email it to Rob .
resides in Ottawa, Canada, and is the founder of GravelleConsulting.com. Rob has built systems for Intelligence-related organizations such as Canada Border Services, CSIS as well as for numerous commercial businesses. Rob to receive a free estimate on your software project. Should you hire Rob and his firm, you'll receive 15% off for mentioning that you heard about it here!
In his spare time, Rob has become an accomplished guitar player, and has released several CDs. His former band, Ivory Knight, was rated as one Canada's top hard rock and metal groups by Brave Words magazine (issue #92).
Rob uses and recommends MochaHost, which provides Web Hosting at $3.10 per month, 2 LifeTime Free Domains, and 6 Months Free!
Original: February 14, 2011
Find a programming school near you