General Event Model
When 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; and the
changing of focus from one element to another.
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 of the HTML object
model because it was not necessary. In the past, browser implementers considered
only a few elements interesting enough 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 following code, 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 would be 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 anchor. After the event fires on the anchor,
it fires on the body and finally on the document. Event bubbling allows an
event to be handled at any level of the containership hierarchy. In the
preceding code, a single event handler for clicks on the anchor will also handle clicks
on the image.
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 preceding example, 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 "The event Object" later in this chapter. [Содержание]
|
