At the Forge - Dojo Events and Ajax
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>
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.
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:
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
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.