Inside Dynamic HTML - Book Information

Events are notifications that occur as a result of user actions or state changes within a document or window. Dynamic HTML exposes a set of events that allows the Web author to respond to most interactions between the user and the document. By responding to events, the author can create completely interactive pages.

In this chapter you'll be introduced to techniques for handling events. The chapter concludes by demonstrating an application that combines the built-in support features of Dynamic HTML with the power of JavaScript/ JScript function pointers to create a customized event binding mechanism.

The following topics are covered in this chapter:

General event model
Dynamic HTML provides a powerful event model that is closely related to the document's underlying structure. Understanding and taking advantage of this model allows you to write efficient, maintainable code. The Dynamic HTML event model is based on two powerful new features for controlling the document's behavior: event bubbling and default actions.

Event bubbling is the event model feature that observes the document's structural hierarchy in the processing of event notifications. All events can be responded to by each parent element in the containership hierarchy as well as by the element the event occurred within. In other words, every action on the document occurs on the element, its parent element, and so on until the body and eventually the document itself receives the event notification. The event can be processed at each level, enabling you to write compact generic code.
Default actions represent the browser's built-in handling of the event. Many events allow the default action to be overridden for custom handling or to be augmented with complementary processing.
Understanding the event model is crucial to understanding how to harness the power of Dynamic HTML to create interactive documents. This chapter introduces the event architecture; later chapters will cover techniques and operations in detail.
Event binding
Event binding is the association of a script with an event on the document or window, or with an event on an element in the document. This section discusses the different techniques available in Dynamic HTML for binding scripts to events.
event object
The event object exposes the information related to an event to the script. The event object is a language-independent mechanism for passing parameters and for controlling different aspects of the event model. For example, on a mouse event, the current mouse location and button state information are exposed through properties of the event object.
Programming standard user events
Standard user events include the mouse, keyboard, focus, and help events that are available on almost every element in the document. This section introduces the interactions between these events and the event object. Additional events are supported by certain elements and objects and are discussed throughout the book with their respective objects.
Event Demonstrations

The Event Tutor^IE4 teaches you about the Dynamic HTML events and Event Bubbling.
The chapter concludes with two examples of event binding. The first example consists of an Event Tutor that can be used to learn about the event model. In this example, events on a document can be tracked individually or as a group. The second example, Event Broadcaster, is a powerful demonstration of JavaScript/JScript function pointers and events. In this example, you'll learn how to write a custom event binding mechanism that allows multiple functions to be easily associated with a single event.

General Event Model

Whenever the user interacts with the page or when the document's state is about to change, an event is fired. The user generates events by moving the mouse, clicking a mouse button, or typing on the keyboard within a document. Document state changes that can fire events include the loading of the document, images, or objects; the occurrence of an error on the page, or a change of focus.

Event Bubbling

HTML documents are structured documents with a defined containership hierarchy. Event bubbling is the generic capability for all actions to follow this structural hierarchy. When an event occurs, it fires first on the source element, and then on the source's parent element, and it continues to fire on successive parent elements until it reaches the document element.

Event bubbling did not exist in earlier versions the of of the HTML object model because it was not necessary. In the past, browser implementers considered only a few elements interesting enough by to fire events. With the introduction of Dynamic HTML, however, all elements now fire events. This means that now all elements on the page-every P, H1, and so on-can and do fire events. The extension of events to all elements could have made scripting a lot more complex. But with event bubbling, the reverse happens-scripts can be more powerful and better written.

In the code below, the body, the anchor, and the image all have events associated with them.

<HTML>
   <HEAD>
      <TITLE>Go Home!</TITLE>
   </HEAD>
   <BODY>
      <A HREF="home.htm"><IMG SRC="home.gif">Go Home</A>
   </BODY>
</HTML>

Without event bubbling, trying to write an event handler for all click events that occur on the anchor would be complex. The same event handler would need to be written twice: once for the image, and once for the anchor. This redundancy is necessary because if the user clicks on the image, the image receives the event, and if the user clicks on the following text, the anchor receives the event. Event bubbling solves this problem. With event bubbling, clicking on the image first fires the click event on the image. The event then automatically fires on the image, it is automatically fired on the anchor. After the anchor, the event fires on the body, and finally the event fires on the document. Event bubbling allows an event to be handled at any level of the containership hierarchy. In the code above, a single handler for clicks on the anchor will also handle clicks on the image.

See Event Bubbling Tutor^{IE4 Demo}

Default Actions

In addition to event bubbling, many events have default actions. A default action is what the browser normally does as a result of the event. For example, the default action of clicking on a link <A HREF="..."> is to follow the specified HREF and load the page.

With the Dynamic HTML object model, it is possible to override an existing default action with custom behavior. If an event does not have a default action and custom behavior is being written, it still is a good idea to cancel the potential default action. This ensures that the code will continue to execute correctly if a default action is later supported by a browser.

The default action is not always defined by the source of the event-it may be defined by a parent element. In the example above, when the user clicks on the image the default action of following the link is defined by the anchor element that contains the image. However, if the image cancels an event's default action, the default action of the anchor will no longer apply, because the default action can be canceled by any element during the event chain. Once an event handler specifies that it is canceling the default action, the default action for the entire event chain is canceled.

Event bubbling and default actions are different concepts and can be controlled independently. For example, if the image stopped the event from bubbling up to the anchor but did not cancel the default action, the anchor's default action would still apply to the event, and the link would still be followed. The reverse also holds true: if neither the anchor nor the image cancel the default action, but instead when the event reaches the body element the default action is canceled, the link will not be followed. The properties for canceling the default action or stopping the event from bubbling are introduced in the section "Event Object" later in this chapter.

Inside Dynamic HTML
Microsoft Programmers Series

Chapter 3
Dynamic HTML Event Model

General Event Model

Event Bubbling

Default Actions

Inside Dynamic HTMLMicrosoft Programmers Series

Chapter 3 Dynamic HTML Event Model

General Event Model

Event Bubbling

Default Actions

Inside Dynamic HTML
Microsoft Programmers Series

Chapter 3
Dynamic HTML Event Model