HTML and CSS Reference
In-Depth Information
appendText("outer Div Clicked");
}
function middleDivClick() {
appendText("middle Div Clicked");
}
function innerDivClick() {
appendText("inner Div Clicked");
}
function appendText(s) {
var li = document.createElement("li");
li.innerText = s;
document.getElementById("eventOrder").appendChild(li);
}
function clearList() {
var ol = document.createElement("ol");
ol.id = "eventOrder";
document.getElementById("bod").replaceChild(ol,document.
getElementById("eventOrder"));
}
</script>
<body id="bod">
<div id="outer">
<div id="middle" >
<div id="inner">
</div>
</div>
</div>
<ol id="eventOrder"> </ol>
<button type="button" id="clearButton">Clear</button>
</body>
When this HTML is rendered in the browser, the result is three nested
div
elements, as
shown in Figure 2-2. In this code are three
div
elements stacked on top of each other. The
styling is applied to provide a visual distinction between the boxes. When a
div
box is clicked,
the click event fires. The event listener code in the assigned handler outputs the name of the
clicked
div
to an ordered list so that the order in which the events are clicked is identified.
FIGURE 2-2
Three nested
<div>
elements to display the effect of event bubbling
Search WWH ::
Custom Search