Event Listening Made Easy with Dojo.connect | WebReference | 2 | WebReference

Event Listening Made Easy with Dojo.connect | WebReference | 2


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 onmouseover that fires only once on first enter.
  • onmouseleave: a normalized version of onmouseout that 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:

After 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.


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