Pam is booking a trip on the corporate travel planner. She sees a form with the usual fields, and clicks on location. Suddenly, a list of cities fades in beside the form, and Pam selects Paris. Beside the city list, a second list appears, this one showing approved hotels. Pam chooses the Hilton and both lists disappear. Pam's pleased to proceed with the destination on the updated form, which now reads, "Paris Hilton".

How can the application respond to user activity?

Handle most User Actions within Javascript, using event handlers. The essence of Ajax is rich browser-based interaction, and DOM events are the technology that make it happen. DOM objects can register event handlers, functions that are notified when events occurred. This callback model should be familiar to anyone who's worked with desktop GUI frameworks.

Let's say you want to run the following function when the user clicks a shutdown button:

    function shutdown() {
      if (confirm("Are you sure you want to shutdown?")) {
        postShutdownMessageToServer();
      }
    }

The simplest way to set this up is to declare a button with an onclick event handler:

    <button id="quitButton" onclick="shutdown();"/>Quit</button> <!-- Obtrusive -->

Now the web browser will arrange for shutdown() to be called whenever the button is clicked. However, we can improve on this, because the above declaration mixes Javascript with HTML. Cleaner to just declare the button and deal with an event handler in a separate Javascript file. Since we always want this behaviour, we should declare it as soon as the page loads. To run something when the page loads, we can use another event handler, one triggered by browser activity rather than a User Action: onload.

    [HTML]
    <button id="quitButton"/>Quit</button>

    [Javascript]
    window.onload = function() {
      quitButton.onclick = shutdown;
    }

Note that we're declaring this inside window.onload instead of "out in the open"; if you do the latter, you might get an error because the script might be executed before the button is actually on the page. You'll see the window.onload idiom used in most Javascript code, including all the Ajax Patterns demos.

Instead of referencing a callback function, it's sometimes convenient to define the callback as a closure (anonymous function), as in:

    quitButton.onclick = function() {
      if (confirm("Are you sure you want to shutdown?")) {
        postShutdownMessageToServer();
        quitButton.onclick=null;
      }
    }

Registering events with Javascript, as opposed to in HTML tags, is an example of unobtrusive Javascript because it separates Javascript from HTML. And defining the event handler in Javascript also has another benefit: you can dynamically redefine actions in response to system events. Our shutdown() method could include redefine the handler to avoid a double-shutdown:

    function shutdown() {
      if (confirm("Are you sure you want to shutdown?")) {
        postShutdownMessageToServer();
        quitButton.onclick=null; // Quit button no longer triggers
an event.
      }
    }

Notice the model here involves a single handler for any event type; the above commands set the handler, in a manner which will remove any existing handlers. In most cases, that's just fine and it has the merit of being completely portable. In some situations, though, it's nice to add a handler instead as it makes the code more modular. Two separate library functions can then register for the same events, without having to be aware of each other. Likewise, a function for removing would also be nice:

    addEvent(quitButton, "click", postShutdownMessageToServer); 
    ...
    removeEvent(quitButton, "click", postShutdownMessageToServer); 

Browsers do offer support for this functionality, but it's unfortunately varied and a portable solution has been notoriously difficult. So much so that a competition was recently held to find the best addEvent() and removeEvent() functions, and you can find the winner, a fifteen-line script, online. Dojo Toolkit also supports this behaviour as part of its sophisticated event library.

It's not always enough for the event handler to know that an event has occurred; it needs to know about the event. For example, the same event handler might be used for three different buttons, in which case it will need to know which of the buttons was clicked. For this reason, the web browser creates an event object upon each user event, containing various bits of information. In Firefox, it's passed to the event handler, so you just ensure an event parameter exists:

    function shutdown(ev) {
      ...
    }

In previous examples, we omitted the event parameter, which is just fine since parameters are optional in Javascript functions - omitting them just means you don't get an opportunity to use them^[4]. As it happens, IE doesn't pass the value in anyway, and instead holds the event in a window attribute. Again, Javascript's loose handling of parameters means you won't actually get an error by including the parameter in IE. However, the value will always be null, which isn't very useful. What all this leads to is the following boilerplate code, which you can use whenever you care about the event. An "equaliser" statement gets hold of the event whichever browser we're in:

    function shutdown(ev) {
      event = event || window.event;
      ....
    }

The event object contains various information, such as which element was clicked and whereabouts the mouse was. The various event types are covered in the Decisions.

Here are a couple of basic examples from the Ajax demos. The Basic Time Demo handles a button click like this:

    $("defaultTime").onclick=requestDefaultTime;

The wiki tracks which focus and blur events in order to show the user which message is being edited, and to upload any messages after a blur occurs. It also tracks mouse movement over each area, to provide an affordance indicating that the fields can be edited:

    messageArea.onmouseout = onMessageMouseOut;
    messageArea.onmouseover = onMessageMouseOver;
    messageArea.onfocus = onMessageFocus;
    messageArea.onblur = onMessageBlur;

Each of these passes to getMessage, which identifies the message element that was acted upon:

    function getMessage(event) {
      event = event || window.event;
      return event.target || event.srcElement;
    }