If you've ever worked with events using the Dojo libraries, you're no doubt
familiar with dojo.connect and dojo.publish. With these two excellent choices
for tapping into the event model, you might feel little need for considering
additional mechanisms. Or haven't you heard, the Dojo libraries are no place
for closed-mindedness! There's always another way of doing things. You might
even find your personal preference just around the bend! This may well be the
case with the dojo.behavior module. It provides a simple and lightweight mechanism
for listening to HTML document events that exploits dojo.query's super powerful
node selection capabilities. Add to that an ultra-compact two method API of
dojo.behavior.add() and dojo.behavior.apply() and you just might have one of
the best event handling mechanisms around!
A Bit About dojo.query
Ben Nolan created the dojo.behavior JavaScript library back in 2005 as a way
to make connecting to element event's less obtrusive. As such, it would render
all those action related tag attributes such as onclick, onfocus, onblur, onmouseover,
obsolete. One of the unique features of his module is that it harnesses the power
of the excellent dojo.query CSS3 query selector engine. A couple advantages
to piggy backing on dojo.query() is that you don't have to make sure that the
DOM has been loaded when adding a behavior, the module takes care of it for
you.
Adding a dojo.behavior
As the method name implies, calls to add() for an already existing behavior
do not replace the previous rules, but rather are additive. Hence, once a behavior
has been added to an element, you don't have to worry about clobbering it. Adding
a dojo.behavior to an element's triggered actions is done in two steps: First,
the add() method appends the specified behavior to the element's existing list
of behaviors. Calling apply() then switches on the specified behavior. Think
of it as behavior declaration and instanciation!
dojo.query() method, dojo.behavior.add() accepts a valid CSS3 selector
and returns an instance of dojo.NodeList, a subclass of Array with many convenience
methods for making DOM manipulation and event handling easier. New nodes which
match the rule will have all added behaviors applied to them. But that's where
the similarity to dojo.query() ends. The returned dojo.NodeList from dojo.behavior.add()
include associated functions to various browser events. To do that, it accepts
an Object that is made up of CSS3 patterns, associated events, and their function
code. A special function called found() can also be included to execute code
when an element match occurs. Here is the syntax. Note that everything enclosed
within square brackets ([]) is optional:
In the following example, the found() function reports when the element whose
ID is "#elementid" is located. At this point, however, no behavior
has been specified (we'll get to that soon enough):
As a shorthand, if a function is passed (instead of an object) to a selector,
it is assumed to be the found() function:
Associating Code with an Event
The dojo.behavior mechanism is highly flexible in its application and allows
you to connect to DOM events using either the dojo.connect() or dojo.publish()
connections.
Here's an example that uses dojo.connect() to add handlers for both the onclick
and onmouseover events:
Handlers can be associated with any "on..." DOM event, such as
onclick, onmouseenter, onmouseleave, onblur, etc.
Here is the full listing.
The following code demonstrates the use of topic publishing, using dojo.publish().
All that's required is to supply the channel string and dojo.behavior will publish
to that channel every time the matching elements trigger the supplied events:
Find a programming school near you