Developing advanced Tutorials Using Dojo's AJAX applications, part 5th: event Handling in browsers

Description: Event handling is an important part of Ajax application and the source power of dynamic change. This article details the event-handling related content in the browser, including registering event listeners, the propagation mechanism after the event, writing event listeners, and the support that Dojo provides to event handling. Finally, the best practices associated with browser memory leaks and performance are described.

Events in the browser are the source of dynamic changes in Ajax applications. The user interacts with the application by inputting the device (mainly the keyboard and mouse). For users of different actions, such as click the left mouse button, right button, or press the key on the keyboard, the browser will produce the corresponding event. These events propagate in the current document tree according to certain rules. Applications can process specific events to respond to the user's actions, depending on their needs. This event-driven approach, not only used in WEB applications, is also widely popular in desktop applications. This article describes in detail all aspects of event handling in the browser, including the registration of event listeners, event propagation, event handling, and other high-level topics. This article also describes how to use the Dojo.connect () provided by Dojo. The Dojo version used in this article is 1.4. Here's how to register event listeners first.

Registering event Listeners

The purpose of registering an event listener is to add the appropriate processing logic when the event occurs. Event handling in the browser uses the classic observer (Observer) design pattern. For various events that may arise, Ajax applications use scripts to focus on the nodes ' interest in events and add the corresponding processing logic. The processing logic is invoked when the corresponding event occurs and propagates to the node registered by the listener.

Due to historical reasons, browser compatibility issues, and the standardization of the Consortium, there are currently three ways to register event listeners, namely, the way DOM level 0 is defined, the event model defined by the Web-Consortium specification, and the event model that is unique to IE. These three methods are described in detail below.

How DOM level 0 is defined

This type of event listener is registered by setting the event handling method as a property of the DOM node object. Setting the property is equivalent to registering the listener for the corresponding event. A DOM node object has different properties that correspond to different event types, such as the onclick cursor corresponding to the mouse click, the onsubmit corresponding to the form's submission, and the onkeydown corresponding to the key on the keyboard being pressed and inferior.

This kind of event listener registers the way to appear earliest, has the very good browser compatibility, uses is also relatively simple. The problem with this is that the event-handling method is set to the properties of the DOM node object, so there can be at most one event-handling method for each event for a DOM node. The method that is set later overrides the previous method. This can be a small problem for a more complex Ajax application that is developed by many people. It is likely that a developer adds an event-handling method that is inadvertently overwritten by another developer, causing problems that are difficult to debug. In addition, this method only supports the bubbling phase of the event and does not support the capture phase.

The event model defined by the Consortium specification

The browser event-related content is introduced in the DOM Level 2 specification of the Consortium. One of the important interfaces is Eventtarget, which is used to represent the target of an event. For an event target, you can register multiple event listeners on it. nodes (node) in the DOM implement this interface. Therefore, any node in the document tree can be used as an event target to register the event listener on it. Registering event listeners is done through the AddEventListener (type, listener, usecapture) method of the Eventtarget interface. The parameter type of the method represents the type of event, such as Click, submit, and KeyPress, and the parameter listener represents the method of handling the event, and the argument usecapture indicates whether event capture is enabled. All three of these parameters are required. Details about event capture and bubbling are described in the following sections. The corresponding to the AddEventListener () is RemoveEventListener (), which is used to remove the listener from the event target with the same parameters as AddEventListener ().

The biggest benefit of using the event model defined by the wide-register specification is that multiple listeners can be registered for each event in each node. These listeners do not affect each other. When an event occurs, these listeners are triggered, but the exact order is indeterminate. This is also a standard practice and supports the capture and bubbling of events at the same time. However, the biggest problem is that IE does not support this event model.

An exclusive event model for IE

IE uses an event model that differs from the standard for the same. This model is somewhat similar to the event model defined by the standard of the consortium. It uses the attachevent (type, listener) and detachevent (type, listener) two methods to complete the registration and deletion of event listeners. Compared to the AddEventListener () and RemoveEventListener () methods in the standard-list specification, both methods have one less parameter. This is because IE does not support event capture. The type of the event must also start with "on", such as OnClick, onsubmit, and onkeypress.

IE's unique event model also supports registering multiple listeners for each event for each element. However, the model is only valid in IE, and in other browsers, the event model defined by the Web-Consortium specification needs to be used.

Code Listing 1 shows how to register a mouse click event listener for an element in each of these three ways.

Listing 1. Three examples of event listener enrollment methods

var node = document.getElementById ("mydiv");
Node.onclick = function () {
    Alert ("DOM Level 0 Event Registration");
};
if (Node.addeventlistener) {
    Node.addeventlistener ("click", Function () {
        Alert ("The event Model");
    }, False);
}
if (node.attachevent) {
    Node.attachevent ("onclick", function () {
        Alert ("IE event Model");
    });
}

After describing how to register an event listener, the following describes how to propagate in the current document tree after the event occurred.