Dojo.behavior: Write Modularized HTML Document Event Handling | WebReference

Dojo.behavior: Write Modularized HTML Document Event Handling

By Rob Gravelle


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!

Like the 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: