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

[prev]

Scoping can be accomplished by passing an object as a property to a connection handle (on*). Here is an example where the supplied functions will execute within the scope of the contentPanel object:

For more information on dojo.connect(), see my Event Listening Made Easy with Dojo.connect article. To learn more about dojo.publish(), see my article entitled The Dojo Publish/Subscribe Event Mechanism.

Overriding the Browser's Default Behavior

There will be times that you'll want to replace the default browser behavior with your own custom action. This can be accomplished by including a call to Event.preventDefault() within your handler:

Our final example shows a more complex user-defined behavior object. It utilizes a CSS class with the dojo.addClass() and dojo.removeClass() methods to highlight and restore text on the mouseenter and mouseleave events. The <DIV> element, which has a class of "highlighted_text", matches the CSS3 pattern in the widgets.plugins.textHighlighter.behavior object. The widgets.plugins.textHighlighter.format() and widgets.plugins.textHighlighter.unformat() functions effectuate the changes to the text appearance by adding the "highlighted" class on the mouseenter event, and removing it on the mouseleave event. What makes this code particularly effective is that the CSS information is stored separately from the script. Moreover, housing the code in a plug-in widget allows us to easily add the TextHighligher to any page:

Here is what it looks like in the browser. First, the non-highlighted text:

Figure 1: Non-highlighted Text

The highlighted text:

Figure 2: Highlighted Text

Where's the Disconnect Code?

One strange dojo.behavior quirk is that dojo.behavior.add() doesn't return any handles so you cannot remove behavior once it has been added. Some have suggested that a global suspend/resume API might be a useful addition to the dojo.behavior API to allow a developer to stop and start behaviors, but from all accounts, the Dojo support group has no plans to implement anything in the foreseeable future.

Conclusion

I hope that you found today's article on the dojo.behavior module to be informative and interesting. After reviewing the syntax and various uses of this versatile module, I think that you'll agree that it makes a great addition to dojo.connect and dojo.publish. To recap, some of dojo.behavior's main draws are that:

behaviors can be added to DOM elements which have yet to be inserted into the document. This allows the developer to organize all the behavior for a page in one place, such as in the dojo.addOnLoad() event.
as we saw in the last example, you can add behavior to dynamically added DOM elements.
it allows for easily assembling multiple behaviors to elements in the one statement.
it uses syntax which is similar to that of other frameworks, such as jquery's live method.

Here is the source file containing today's code. It's ready to go, except that you'll have to point the Dojo script to your own host directory.

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). MP3s of his covers project are available from iTunes and other digital music sites.

Rob uses and recommends MochaHost, which provides Web Hosting at $3.10 per month, 2 LifeTime Free Domains, and 6 Months Free!

Original: April 27, 2011