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.