HTML and CSS Reference
In-Depth Information
taxes, trickle-up or trickle-down economics, browser companies argued over the order
in which events are handled, also called event propagation. Does the event bubble up
from its target or does it trickle down to its target?
The way that the events are handled differs by the browser and is based on how Netscape
and Internet Explorer dealt with events back in the 1990s. Suppose you have used an
onClick
event handler in the button of a form. The user clicks the button. What hap-
pens? Netscape said that the event is captured, that is, it comes to life at the window
level and trickles down the document to the form object until it finally reaches the but-
ton, its target: When it reaches its target, the button, the event is fired. An analogy could
be water trickling down a mountain stream until it reaches a lake at the bottom. Internet
Explorer says the event springs to life for the target for which it was intended; (i.e., the
button) and then sends information about the event back up from the button to the form
to the document, then window, like the bubbling up effect of soda water in a glass (see
Figure 13.29).
Capturing
Bubbling
window
document
form
button
onClick
(“do something”)
Figure 13.29
Bubbling and capturing.
Fortunately, the W3C DOM Level 2 provides an Events module that allows the DOM
nodes to handle events with a combination of these methods, but defaults to the bubble-
up model. We will see later how to use event handling with the DOM, how to specifically
program the event to use one model or the other, cancel the bubbling effect, and so on.
For now we will assume the browser is W3C compliant and defaults to bubbling. If you
want to check what model your browser is using, the last exercise in this chapter pro-
vides the JavaScript code for testing. We discuss bubbling and capturing again in Chap-
ter 15.
