Username/Email:  Password: 
TwitterFacebookFlickrRSS
Home ›

At the Forge - Dojo Events and Ajax

Issue 156

From Issue #156
April 2007

Apr 01, 2007  By Reuven M. Lerner
 in
The quality of your Dojo depends upon your connections.

Last month, we began looking at Dojo, one of the most popular open-source JavaScript toolkits to emerge in the last year or two. Although using a toolkit is not required if you want to include Ajax or sophisticated client-side functionality in your Web application, it certainly makes things a great deal easier. In particular, such toolkits typically know how to handle the many subtle differences in JavaScript implementations on different browsers. JavaScript is far more standardized than used to be the case, but a number of traps still exist when trying to work with multiple platforms, and using a toolkit can relieve you of having to handle them yourself.

In last month's article, we looked at Dojo's packaging system, some of its enhancements to the JavaScript language and its rich-text editor. This month, we look at some of Dojo's other capabilities that might interest modern Web developers, including support for events and Ajax.

Event Handlers

One of the cornerstones of JavaScript programming is the use of event handlers—functions that are invoked when a particular event occurs. For example, we can define a function that opens an alert box:


<script type="text/javascript">
    function openAlert() {
    alert("Hello!  This is an alert!");
}
</script>

We can then tell the user's browser to invoke our openAlert function whenever someone clicks on a paragraph of text:


<p onclick="openAlert();">This is a paragraph.</p>

There are several interesting things to notice in this short example. First, we have set the onclick event handler in this case. About a half-dozen other event handlers exist from which we could choose. In many cases, we might set more than one event handler. This was particularly prevalent in the pre-CSS days, when JavaScript event handlers would be used to change the look of an icon when the mouse was hovering over it.

Second, event handlers sometimes can be used in contexts you might not expect. For example, the above <p> tag has an onclick handler. You normally wouldn't think of clicking on a paragraph of text, but we can do that. This is the basis for some of the modern drag-and-drop events.

Third, although JavaScript does make it pretty easy to attach handlers to particular events, some messiness still is involved. We cannot define multiple event handlers easily or disconnect handlers that have been defined.

Dojo Events

By this point, you might be wondering what JavaScript event handlers have to do with using Dojo for Ajax and modern Web applications. The answer is that much of Dojo's functionality, across all of its many packages, depends on the event system. If you want to use Dojo's Ajax package, for example, you need to connect it using Dojo events. This might seem restrictive at first glance; however, Dojo events are surprisingly easy to understand.

As a simple example, let's see how we might implement our onclick handler from before using Dojo events. First, we need to modify our event-handling function so that it takes one argument, the event itself:


<script type="text/javascript">
    function openAlert(evt) {
    alert("Hello!  This is an alert from Dojo!");
}
</script>

Next, we must connect the paragraph to the event. Rather than doing this directly, by setting the onconnect handler, we give our paragraph an id tag:


<p id="para">This is a paragraph.</p>

Now, we can use Dojo's dojo.byId function—similar in some ways to Prototype's $() function—to get the node itself:

var para = dojo.byId("para");

Finally, we connect our paragraph to the handler function we created:

dojo.event.connect(para, "onclick", openAlert);

If we put it all together, we get the program shown in Listing 1, which I have called test-dojo.html.

Listing 1. test-dojo.html


<html>
  <head>
    <title>Testing JavaScript with Dojo</title>

    <script type="text/javascript"
    src="/javascript/dojo.js"></script>
    <script type="text/javascript">
        dojo.require("dojo.event.*");

        function openAlert(evt) {
        alert("Hello!  This is an alert from Dojo!");
        }
    </script>

  </head>

  <body>
    <p id="para">This is a paragraph.</p>
      <script type="text/javascript">
      var para = dojo.byId("para");
      dojo.event.connect(para, "onclick", openAlert);
      </script>
   </body>
</html>

One thing you might notice is the three <script> tags in the file. The first, in the head of the document, downloads dojo.js, the main Dojo source file, from the server. The second, also in the head of the document, imports the Dojo package for events and defines our event-handling function, openAlert. The third and final piece of JavaScript, which attaches the node to the event, is in the body of the document, right after our p tag is defined. This is because we can set an event handler only for an object that already exists, which means after the p tag itself.

If you load the page into a browser window, you will see that it works just like the previous version. Given that this version is more complex, it might not seem obvious how it is better.

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Im fearful of resorting to

Mike's picture
Submitted by Mike (not verified) on Wed, 06/20/2007 - 16:23.

Im fearful of resorting to ajax at times when I am coding because the search engines cant read it.