A for Ajax, Part 7: DOM Events

Events make a web page interactive.

Most events occur when a user interacts with the UI – for example, when a user selects a value from the dropdown list; there are others that occur due to programmatic processing of the document – for example, the load event is raised when the document fully loads in the browser.

The W3C Working Draft and the W3C Recommendation describe an event model around the following:
1. an event object: this contains contextual information about the event.
2. an event target: this is the element on which the event occurs.
3. an event listener: this implements a function that knows how to respond to an event when it occurs on the target.
4. the life cycle of the event object through its capture, target and bubble phases.

The IE model describes a similar model:
1. an event object: this contains contextual information about the event.
2. a source element: this is the element on which the event occurs.
3. an event handler: this is a function that knows how to respond to an event when it occurs on the source element.
4. the life cycle of the event object through its target and bubble phases.

You can read this article online here.

Code download:
You can download the DOMEvents.zip here. This code describes the events discussed in this article in more detail.
You can download the DOMNavigation_Enhanced.zip here. The tree representation of the DOM from the last post can now be collapsed/expanded using events.

A for Ajax, Part 6: The Document Object Model [DOM]

What is the DOM?
The W3C Recommendation defines it as: “The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. In the DOM specification, the term "document" is used in the broad sense - increasingly, XML is being used as a way of representing many different kinds of information that may be stored in diverse systems, and much of this would traditionally be seen as data rather than as documents. Nevertheless, XML presents this data as documents, and the DOM may be used to manage this data.”

What can be done with the DOM?
From the W3C Recommendation: “With the Document Object Model, programmers can build documents, navigate their structure, and add, modify, or delete elements and content. Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Model, with a few exceptions..”

You can read the article online here.

Code download
You can download the DOMNavigation.zip here. The JavaScript code has examples of:
-navigating and manipulating the DOM
-object detection
-a way to create a tree representation of the DOM. We will improve upon this code in our next post on DOM events