HTML and CSS Reference
In-Depth Information
handler? Or the
<header>
? Are they just going to react to the innermost or outermost
event? Look closely at both panels in Figure 12-1.
239
Figure 12-1: Nested event handlers.
In the top panel, as soon as a user clicks the line “Click h is Paragraph,” the event is reported
in the alert box (top panel). h en, when the user clicks the OK button in the JavaScript
pop-up, the second alert appears letting him know that he's clicked in the
<article>
container as well. One way of looking at the events is bubbling up, beginning in the lowest
level in the hierarch of elements and then bubbling up to the topmost level.
USING THE DOCUMENT OBJECT MODEL
h e Document Object Model (DOM) for HTML5 represents a hierarchy tree. At the base
(root) of every Web page or document is the
<html>
tag, and the rest of the elements in the
page are a branch somewhere along the tree. JavaScript uses the DOM for addressing and
manipulating a Web page beyond what you can do with HTML5 alone. h e entire DOM tree
is a representation of the document that resides in your computer's memory.
When any part of the DOM tree is addressed, it does so by referencing an element within the
tree, beginning with
document
. Each element in the tree is addressed in order of the
hierarchy beginning with
document
. h e dif erent elements in a Web page are the dif erent
